使用 jQuery 循环浏览导航菜单

Question

相对（？）链接：

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

但我认为如果我循环这些可能会更短

所以我尝试遍历这些菜单项，以便所有菜单项都出现矩形

我在 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 元素之间有一个很好的简单关系：它们在id 属性中具有相同的后缀编号。所以，你可以用这样简单的东西来完成整个事情：

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

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

至于为什么：

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

不起作用，您遇到了典型的关闭问题。您提供给.mouseover 的函数是i 上的闭包，因此它们最终都使用i 拥有的最后一个值，该值为4；这意味着所有内部选择器最终都以$('selectA4') 结尾，并且没有指代任何有用的东西。如果您真的想使用循环，那么您可以强制 i 在您希望它与此一起使用时进行评估：

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

或者这个：

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