Question

relative（？）链接：

http://api.jquery.com/each/

http://api.jquery.com/jQuery.each/

您好

我有这个导航菜单

        <table>
        <tr>
        <td><div id="menuItem1" class="menuItem"><a href="http://www.w3schools.com">PORTFOLIO</a></div></td>
        <td><div id="menuItem2" class="menuItem">ABOUT ME</div></td>
        <td><div id="menuItem3" class="menuItem">CONTACT</div></td>
        </tr>
        <tr>
        <td><div id="selectA1" class="selectA current"></div></td>
        <td><div id="selectA2" class="selectA"></div></td>
        <td><div id="selectA3" class="selectA"></div></td>
        </tr>
        </table>

selectA类是一个矩形，当鼠标移过它时将选择menuItem

长代码就像

$("#menuItem1").mouseover(function () {
    $("#selectA1").stop().animate({opacity: 1},{ queue: false, duration: 200 });
});

$("#menuItem2").mouseover(function () {
    $("#selectA2").stop().animate({opacity: 1},{ queue: false, duration: 200 });
});

$("#menuItem3").mouseover(function () {
    $("#selectA3").stop().animate({opacity: 1},{ queue: false, duration: 200 });
});

$("#menuItem1").mouseout(function () {
    $("#selectA1").stop().animate({opacity: 0},{ queue: false, duration: 400 });
});

$("#menuItem2").mouseout(function () {
    $("#selectA2").stop().animate({opacity: 0},{ queue: false, duration: 400 });
});

$("#menuItem3").mouseout(function () {
    $("#selectA3").stop().animate({opacity: 0},{ queue: false, duration: 400 });
});

但我认为如果我循环那些

可能会更短

所以我试图遍历这些menuItems，以便为所有菜单项显示矩形

我在javascript中试过的，都没有工作

var i=1;
for (i=1;i<=3;i++) {
$("#menuItem"+i).mouseover(function () {
    $("#selectA"+i).stop().animate({opacity: 1},{ queue: false, duration: 200 });
});
}

和

var i=1;
while (i<=3) {
$("#menuItem"+i).mouseover(function () {
    $("#selectA"+i).stop().animate({opacity: 1},{ queue: false, duration: 200 });
});

和

$(".selectA").each(function (i) {
$("#menuItem"+i).mouseover(function () {
    $("#selectA"+i).stop().animate({opacity: 1},{ queue: false, duration: 200 });
});
}


i++;
}

谢谢你的帮助

Answer 1

首先，您最好使用hover而不是mouseover / mouseout对。

其次，您根本不需要使用each，.menuItem和.selectA元素之间存在简单的关系：它们的{后缀号相同{1}}属性。所以，你可以用这样简单的事情来完成整个事情：

id

演示：http://jsfiddle.net/ambiguous/eza8b/

至于为什么这样：

$('.menuItem').hover(
    function() {
        var n = this.id.replace(/[^\d]/g, '');
        $('#selectA' + n).stop().animate({ opacity: 1 },{ queue: false, duration: 200 });
    },
    function() {
        var n = this.id.replace(/[^\d]/g, '');
        $('#selectA' + n).stop().animate({ opacity: 0 },{ queue: false, duration: 200 });
    }
);

不起作用，你有一个经典的闭包问题。您提供给for(var i = 1; i <= 3; i++) { $("#menuItem" + i).mouseover(function () { $("#selectA" + i).stop().animate({opacity: 1}, {queue: false, duration: 200 }); }); }的功能是.mouseover上的闭包，因此所有这些功能最终都使用i的最后一个值，该值为4;这意味着所有内部选择器最终都为i，并且不会引用任何有用的东西。如果你真的想要使用循环，那么你可以强制$('selectA4')进行评估，当你想要它时：

或者这个：

for(var i = 1; i <= 3; i++)
    (function(n) {
        $("#menuItem" + n).mouseover(function () {
            $("#selectA" + n).stop().animate({opacity: 1}, {queue: false, duration: 200 });
        });
    })(i);

使用jQuery循环浏览导航菜单

1 个答案: