0

大家好，我正在尝试为我的博客文章创建一个“zen view”模式，所以我只想获取#single div 的内容（只有文章内容，没有标题或侧边栏等......）并将其放入另一个名为 #zen-view 的 div，请注意我使用的是WordPress。

所以我现在尝试制作这段代码：

<button class="zen">Read in Zen mode</button>   // when clicked display #zen-view div
<div id="zen-view">  // initialy the css of that div is set to display:none
<p id="zen-content"></p>   // the tag where the contet of the #single div will be load
<button class="close" href="#">Close Zen mode</button>   // when clicked close zen-view div
</div>

这是jquery

$(function() {

     $('.zen').click( function() {
            $('#zen-view').show();
            ... how can i grab the content of #single div and put into #zen-content div? ...
        });
     $('.close').click( function() {
            $('#zen-view').hide();

        });
    });

谢谢

4

4 回答 4

1

演示 http://jsfiddle.net/QRv6d/11/

好读：http ://api.jquery.com/html/

代码

$(function() {

     $('.zen').click( function() {
            $('#zen-view').show();
             $('#zen-content').html($('#single').html());
            //... how can i grab the content of #single div and put into #zen-content div? ...
        });
     $('.close').click( function() {
            $('#zen-view').hide();

        });
    });​
于 2012-06-21T11:04:34.703 回答
1

如何获取#single div 的内容并放入#zen-content div？

$('#zen-content').html($('#zen-content').html());

如果您不想覆盖#zen-content内容：

$('#zen-content').append($('#single').html());

或者使用普通的js：

document.getElementById('zen-content').innerHTML += $('#single').html();
于 2012-06-21T11:03:06.913 回答
1 
$('#zen-content').html($('#single').html());
于 2012-06-21T11:03:43.853 回答
0

除了按照前面的答案将 HTML 代码作为字符串复制到另一个元素中之外，您还可以克隆实际的 DOM 树，例如：

$('#zen').append($('#single').children().clone());

针对以下 HTML：

<div id="single">
    <div class="innerContent">Some content over here <i>with markup</i></div>    
</div>
<div id="zen" />

但是，这将要求您将博客文章的内容包含在另一个 div 中，因为如果不调用children()您将克隆原始博客文章的 div 而不仅仅是内容。

另请参阅此处的运行示例：http: //jsfiddle.net/N3wFH/。

于 2012-06-22T06:42:16.750 回答