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

Answer 1

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

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