最近用jQuery1.10,希望設計成滑鼠滑過相應的主選單,子選單就會展開
五個主選單id: MENU1 ~ MENU5
五個子選單id: SUB1 ~ SUB5
原本寫成:
$("#MENU1").hover(
function(){
$("#SUB1").slideDown(800);
},function(){
$("#SUB1").slideUp(300);
});
.
.
.
.
$("#MENU5").hover(
function(){
$("#SUB5").slideDown(800);
},function(){
$("#SUB5").slideUp(300);
});
為了希望精簡而改成迴圈,卻發現下面這個方法不行
for(var i = 1; i < 6; i++){
$("#MENU"+i).hover(
function(){
alert(i);
$("#SUB"+i).slideDown(800);
},function(){
$("#SUB"+i).slideUp(300);
});
}
我後來以查到可行的寫法(內部兩個function "#SUB"+變數 要改用 this.id.substr(4)
控制),但仍想請教:
1. 為何明明同樣包在迴圈之內,內部兩個function用 i 卻無法正確執行?
其原理為何?
2. 在內部function 增設一alert(i)觀察,卻發現其 i 值是"6"!
甚至超過迴圈的上限,這又是為何?
有勞各位先進了,謝謝 m(_ _)m