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>

我认为答案可能涉及每个功能;但是对于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('');
});

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(''); 
});

jQuery克隆迭代div在悬停时

4 个答案: