jQuery在悬停时克隆迭代div

Posted 2023-05-07

【中文标题】jQuery在悬停时克隆迭代div

【英文标题】：jQuery clone iterative divs on hover

【发布时间】：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 没有单独的脚本。请问各位大神，我做错了什么？

【参考方案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。是的，这个（这个）有效。