Question

我希望在将鼠标悬停在overlay以上时显示item。

这段代码：

<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”类，将hide / show逻辑应用于“overlay”类，即可完全无需显式循环遍历项目。另外，为了隐藏和显示项目，jQuery友好模式是使用hide和show方法。

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

Answer 4

for (var i = 0; i < items.length; i++) {
    $(items[i]).hover(function(){
        $(this).find('.overlay').css("visibility", "visible");
    }, function(){
        $(this).find('.overlay').css("visibility", "hidden");
    });
}

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

4 个答案: