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的内容

2 个答案: