使用 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 类是一个矩形，当鼠标移到它上面时将选择菜单项，

长代码是喜欢

$("#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 而不是 < a href="http://api.jquery.com/mouseover/" rel="nofollow">鼠标悬停/鼠标悬停对。

其次，您根本不需要使用 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/ambigously/ eza8b/

至于为什么 this:

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

does not work ，你遇到了一个典型的闭包问题。您提供给 .mouseover 的函数是对 i 的闭包，因此它们最终都会使用 i 所具有的最后一个值，该值是4；这意味着所有内部选择器最终都为 $('selectA4') 并且没有引用任何有用的内容。如果你确实想使用循环，那么你可以在你希望使用 this:

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

或 this:时强制对 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));