遍歷與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));