3

画像をクリックして、div のコンテンツを別の div (css を使用して非表示) のコンテンツに置き換えたいと思います。ただし、ここで提案されているいくつかの方法を使用しても、機能しないようです。

私のコードは以下です：

html

<h3>Recent Callaborations</h3>
    <div id="collaborations">
    <img class="rec1" src="http://domain.com/michaelscott/wp-content/uploads/2013/02/url.png"/>
    <div id="rec1">Some image caption that is hidden now and that will replace what is in the rec div below</div>
 </div>

<div id="rec-box" class="rec">
    this is the content that is to be replaced
</div>

js

jQuery(document).ready(function() {
        jQuery(".rec1").click(function(event) {
            event.preventDefault() 
            jQuery('#rec-box').html($(this).next('#rec1')[0].outerHTML); 
          });
        });

CSS

#collaborations {
    width: 100%;    
    margin:0 0 10px 0;
    padding:0;
}

#collaborations img {
    display:inline-block;
}
.rec {
    background: #EDEDED;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 10px;
}
#rec1, #rec2, #rec3, #rec4 {
    display:none;
}
4

5 に答える 5

4

html()正しい のを設定するだけですdiv。これを試して：

jQuery(document).ready(function() {
    jQuery(".rec1").click(function(event) {
        event.preventDefault() 
        jQuery('#rec-box').html(jQuery(this).next().html()); 
    });
});
于 2013-02-04T10:59:04.670 に答える
1 
jQuery(document).ready(function() {
    jQuery(".rec1").click(function(event) {
        event.preventDefault() 
        jQuery('#rec-box').html(jQuery("#rec1").html()); 
    });
});
于 2013-02-04T10:59:54.493 に答える
1

outerHTML( ではなく) プロパティを使用して、その内容だけでなく、非表示の要素全体をキャプチャするため、元のコードは失敗したようですinnerHTML。これは、新しくコピーされたコンテンツにまだ が<div id='rec1'...>あり、css ルールの結果としてまだ非表示になっていることを意味します。

jQuery のhtmlメソッドは get と set の両方を実行できるinnerHTMLため、ここでは正しいメソッドです。

$(document).ready(function () {
  $(".rec1").click(function (event) {
    event.preventDefault();
    $('#rec-box').html($('#rec1').html()); //replaces with contents of #rec1
  });
});
于 2013-02-04T11:00:13.157 に答える
1

あなたはそれを得る必要が$("#rec").contents()あり.clone()ます

あなたはそれを持った後にそれを入れる必要があり.append()ます$('#rect-box').empty()

jQuery(function($) {
    $(".rec1").on('click',function(event) {
        event.preventDefault();
        $('#rec-box').empty().append(($('#rec1').contents().clone());
    });
});
于 2013-12-10T14:22:48.827 に答える
1

次の解決策をお勧めします:)それが役立つことを願っています

HTML

<h3>Recent Callaborations</h3>
<div id="collaborations">
    <a href="#rec1" class="switchContent"><img class="rec1" src="http://cmagics.eu/michaelscott/wp-content/uploads/2013/02/url.png"/></a>
    <div id="rec1">Some image caption that is hidden now and that will replace what is in the rec div below</div>
 </div>

<div id="rec-box" class="rec">
    this is the content that is to be replaced
</div>

JavaScript

$(document).ready(function() {

    switchContent   =   function(ev) {
        var el  =   $($(this).attr('href'));
        if(el.length == 1) {
            $('#rec-box').html(el.html());
        }
        ev.preventDefault();
    };

    $('.switchContent').on('click',switchContent);
});
于 2013-02-04T11:05:11.547 に答える