0

相对（？）链接：

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

感谢您的帮助

4

1 回答 1

0

首先，你会更好，hover而不是mouseover/mouseout对。

其次，您根本不需要使用，您的和元素each之间有一个很好的简单关系：它们的属性中具有相同的后缀号。所以，你可以用这样简单的东西来完成整个事情：.menuItem.selectAid

$('.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));
于 2011-10-01T23:15:16.480 回答