使用 jquery 将 div 的内容替换为单击的 div 内容

Question

我正在为这个问题苦苦挣扎，希望有人能提供帮助。

我想要实现的是单击 div，用另一个替换 div，所以如果我有

<div class="nibbles"><img src="something"/><h1>Something</h1><p>something</p></div>
<div class="nibbles"><img src="something"/><h1>Something</h1><p>something</p></div>
<div class="nibbles"><img src="something"/><h1>Something</h1><p>something</p></div>
<div class="nibbles"><img src="something"/><h1>Something</h1><p>something</p>

如果我单击这些 div 中的任何一个，则 div 应替换为下面的 div

<div class="picked_nibble"></div>

如果我单击另一个 .nibble div，.picked_nibble 将交换该内容。我已经尝试了很多 .html 和 .replaceWith 的组合，但无法让它工作？看到这个 jsfiddle

如果我最终可以让它工作，我希望在内容出现或被替换时有一个淡入淡出的动画，并且还将 h1 内容添加到表单输入中以便稍后提交？

Answer 1

$('div.nibbles').click(function(){
    var innerContent = $(this).html();
    $('div.picked_nibble').hide().html(innerContent).fadeIn('slow');
    $('#input').val( $(this).find('h1').text() );
});

Answer 2

使用下面的代码。具有淡入效果。检查 DEMO

更新：将 h6 值保存到文本框

 $('.nibble_pick').click(function() {
   $('.nibble_choice').hide().html( $( this ).html()).fadeIn('slow');
   $('#title').val( $(this).find('h6').html() );
 });

使用 jquery 将 div 的内容替换为单击的 div 内容

replace content of a div with clicked div content using jquery

html

jquery

replacewith