遍历与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 w的矩形母鸡你的鼠标在它

移动的长码会像

$("#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));