作者skipeco (skipeco)
看板Web_Design
標題[問題] .hover 與迴圈?
時間Tue Apr 22 12:35:41 2014
最近用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
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 114.42.210.109
※ 文章網址: http://webptt.com/m.aspx?n=bbs/Web_Design/M.1398141344.A.B81.html
1F：→ mmis1000:因為closure的關係 04/22 12:53
2F：→ mmis1000:他們的i都是同一個，修改時當然全部都變了 04/22 12:55
4F：→ mmis1000:這是少數js中，不是傳值而是傳參照的狀況，滿有名的陷阱 04/22 15:06
5F：→ mmis1000:至於為何是6，這要從for迴圈的構造看 04/22 19:31
6F：→ mmis1000:基本上for迴圈就是 while迴圈的語法糖，可以這樣展開 04/22 19:32
8F：→ mmis1000:可以看出，退出迴圈時，i的值是6 04/22 19:37
9F：推 harry1123:感謝mm大大!! 剛還在想為啥是6，忘了基本for迴圈特性OTZ 04/22 19:42
10F：→ skipeco:感謝m大! 後來找到一篇資料，也剛好幾乎是在講這問題 04/22 23:01
12F：→ skipeco:確實是因為內層神奇地一直能存取外層最新數據造成的 04/22 23:07
13F：→ skipeco:m大的傳址 和 jsfiddle上的解法真的很精準! 04/22 23:09
14F：→ mmis1000:另外function的參數，其實相當於自動var一個變數，再存入 04/22 23:26
15F：→ mmis1000:外部數據 04/22 23:26