悬停时 jQuery 克隆迭代 div

Question

我有一系列的 div，我想将它们克隆并在悬停到不同的 div 时显示/隐藏。尽管我已经弄清楚如何使用 jQuery 克隆一个或全部，但我对如何迭代地克隆每个组件仍然很困惑。

HTML，本质上是：

<div id="test">
  <div id="source1" class="src">content1</div>
  <div id="source2" class="src">content2</div>
  <div id="source3" class="src">content3</div>      
</div>

<div id="dest"></div>

我认为答案可能涉及一个 each 函数；然而，对于 jquery.min.js，以下脚本错误为“Function.prototype.apply 的第二个参数必须是一个数组”：

$(".src").hover(function() {
 $(".src").each(function() {
  $(this).clone().appendTo('#dest');
  return false;
  $('#dest').show();        
 }, function() {
  $('#dest').hide();
  $('#dest').html('');
 });
});

此位确实可以很好地克隆每个（不是每个）.src div然而，悬停：

$('.src').hover(function() {
    $('.src').clone().appendTo('#dest');
    $('#dest').show();
}, function() {
    $('#dest').hide();
    $('#dest').html('');
}); 

所以，回顾一下，当我将鼠标悬停在每个 .src div 上时，我希望将每个 .src div 克隆到 #dest div，然后当我将鼠标移开时消失。然后下一个 .src div 应该在悬停时执行相同的操作，依此类推...无需为每个 sourceN div 编写单独的脚本。请各位聪明人，我做错了什么？

Answer 1

您的假设是正确的，您需要使用 $(this) 符号。

$('.src').hover(function() {
    $(this).clone().appendTo('#dest');
    $('#dest').show();
}, function() {
    $('#dest').hide();
    $('#dest').html('');
});

Answer 2

克隆 div 时，不要使用类选择器 '.src'，只需使用 this 并且它应该仅适用于悬停的 div

$('.src').hover(function() {
    $(this).clone().appendTo('#dest');
    $('#dest').show();
}, function() {
    $('#dest').hide();
    $('#dest').html('');
}); 

http://jsfiddle.net/tsb2A/

Answer 3

$('#test div').bind({
   mouseenter: function(){
       $('#dest').append($(this).clone());
   },
   mouseleave: function(){
       $('#dest #'+$(this).attr('id')).remove()
   }
});

可以吗？

Answer 4

你试过这个吗？

$('.src').hover(function() {
    $(this).clone().appendTo('#dest');
    $('#dest').show();
}, function() {
    $('#dest').hide();
    $('#dest').html(''); 
});