用另一個div的內容替換div的內容jQuery

Question

我想通過點擊圖像來替換另一個div的內容（使用css隱藏）的div的內容。然而，使用這裏建議的幾個方法，我似乎無法得到它的工作。

我的代碼如下：

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; 
} 

Answer 1

你只需要設置正確的。試試這個：

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

Answer 2

jQuery(document).ready(function() { 
    jQuery(".rec1").click(function(event) { 
     event.preventDefault() 
     jQuery('#rec-box').html(jQuery("#rec1").html()); 
    }); 
}); 

Answer 3

你原來的代碼似乎因爲你捕捉整個隱藏的元素，而不僅僅是它的內容，通過使用outerHTML性質（而不是innerHTML）失敗。這意味着新複製的內容仍然有<div id='rec1'...>，並且由於css規則而仍然隱藏。

jQuery的html方法都可以獲取和設置innerHTML，所以這裏是正確的方法。

$(document).ready(function() { 
    $(".rec1").click(function (event) { 
    event.preventDefault(); 
    $('#rec-box').html($('#rec1').html()); //replaces with contents of #rec1 
    }); 
}); 

Answer 4

我寧願以下解決方案:)希望它可以幫助

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); 
}); 

Answer 5

你需要得到$("#rec").contents()和.clone()它

你需要有.empty()它

jQuery(function($) { 
    $(".rec1").on('click',function(event) { 
     event.preventDefault(); 
     $('#rec-box').empty().append(($('#rec1').contents().clone()); 
    }); 
});