如何将多数组参数传递给jquery for循环

Question

我想在将鼠标悬停在overlay%s上时显示我的item%s。

代码如下：

<div class="item" id="item-1">
    <div class="overlay" id="overlay-1"></div>
</div>
<div class="item" id="item-2">
    <div class="overlay" id="overlay-2"></div>
</div>

var items=["#item-1","#item-2"];
var overlays=["#overlay-1","#overlay-2"];
for (var i = 0; i < products.length; i++) {
  $(items[i]).hover(
    function(){$(overlays[i]).css("visibility", "visible");},
    function(){$(overlays[i]).css("visibility", "hidden");});
}

然而，它不能工作...看起来overlays[i]不能被识别。

为什么？

Answer 1

我会做这样的事情

$(".item").hover(function(){
    $(this).find(".overlay").show();
});

Answer 2

这似乎是一个作用域问题，您试图选择的覆盖超出了范围。

只需将鼠标悬停应用于"item“类，并将隐藏/显示逻辑应用于"overlay”类，就可以消除显式循环遍历所有项的需要。此外，为了隐藏和显示项，jQuery友好的模式是使用隐藏和显示方法。

$('div.item').hover(function(){
    var overlay = $(this).children('div.overlay');
    overlay.hide();
});
overlay.hide();
},
function(){
    var overlay = $(this).children('div.overlay');
    overlay.show();
});

在不了解所有细节的情况下，您应该知道这种方法可能会产生一些不必要的闪烁。

Answer 3

这是一个闭包问题。到悬停输入/输出函数实际运行时，循环已经退出很久了，并且i > 2。

添加一个单独的处理函数：

var items=["#item-1","#item-2"];
var overlays=["#overlay-1","#overlay-2"];

function sethover(n) {
  $(items[n]).hover(
    function(){$(overlays[n]).css("visibility", "visible");},
    function(){$(overlays[n]).css("visibility", "hidden");});
}

for (var i = 0; i < items.length; i++) {
  sethover(i);
}