jQuery在悬停时克隆迭代div答案

【问题标题】：jQuery clone iterative divs on hoverjQuery在悬停时克隆迭代div
【发布时间】：2011-10-21 23:03:08
【问题描述】：

我有一系列 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 没有单独的脚本。请问各位大神，我做错了什么？

【问题讨论】：

标签： jquery html hover clone each

【解决方案1】：

您的假设是正确的，您需要使用 $(this) 表示法。

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

【讨论】：

约扎。如此快速和简单。谢谢！！

【解决方案2】：

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

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

http://jsfiddle.net/tsb2A/

【讨论】：

【解决方案3】：

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

还好吗？

【讨论】：

我是这么理解的。我的英语不好。这里有一个演示：jsfiddle.net/rF4s4
谢谢！这确实适用于我提供的简化 html 示例，但似乎不适用于我的实时站点。也许是因为删除 ID？
也许我忘了一个';'在“删除（）”之后

【解决方案4】：

你试过了吗？

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

【讨论】：

谢谢！伟大的思想是一样的——你和rkw。是的，这个（这个）有效。