我有一系列的 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 编写单独的脚本。请各位聪明人,我做错了什么?
最佳答案
您的假设是正确的,您需要使用 $(this) 符号。
$('.src').hover(function() {
$(this).clone().appendTo('#dest');
$('#dest').show();
}, function() {
$('#dest').hide();
$('#dest').html('');
});
关于悬停时 jQuery 克隆迭代 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6975251/