0

こんにちは、私は自分のブログ記事の「禅ビュー」モードを作成しようとしているので、#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

#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 に答える
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 に答える
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 に答える