PTT
Submit
Submit
選擇語言
正體中文
简体中文
PTT
Web_Design
[問題] .hover 與迴圈?
作者:
skipeco
(skipeco)
2014-04-22 12:35:41
最近用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
作者:
mmis1000
(秋月戀楓)
2014-04-22 12:53:00
因為closure的關係他們的i都是同一個,修改時當然全部都變了
http://jsfiddle.net/ZpzbS/
所以要這樣做這是少數js中,不是傳值而是傳參照的狀況,滿有名的陷阱至於為何是6,這要從for迴圈的構造看基本上for迴圈就是 while迴圈的語法糖,可以這樣展開
http://jsfiddle.net/fcPQ7/
可以看出,退出迴圈時,i的值是6
作者:
harry1123
(海賊王)
2014-04-22 19:42:00
感謝mm大大!! 剛還在想為啥是6,忘了基本for迴圈特性OTZ
作者:
skipeco
(skipeco)
2014-04-22 23:01:00
感謝m大! 後來找到一篇資料,也剛好幾乎是在講這問題
http://goo.gl/27YmRc
確實是因為內層神奇地一直能存取外層最新數據造成的m大的傳址 和 jsfiddle上的解法真的很精準!
作者:
mmis1000
(秋月戀楓)
2014-04-22 23:26:00
另外function的參數,其實相當於自動var一個變數,再存入外部數據
繼續閱讀
[情報] 做 loading 圖的好工具
foobar
[請益] PHP 表單送出後收到mail有時會空白
binggo
[問題] 背景mp4播放
dreamerXYZ
[問題] wordpress如何取消隱藏版面
tpdfes12000
[問題] 動態網頁設計 指令碼問題
a85222781
[問題] Google charts org chart 顯示中文
saponevol23
[問題] 如何移除/更改登陸在 YAHOO 的網站
ashaly
[問題] 請問有人知道“線上產生器”要怎麼做嗎
creamybutter
[問題] 裁切圖片有辦法JS做完嗎?
qazwsx9006
Re: [問題] AngularJs 和 rails
ducksteven
Links
booklink
Contact Us: admin [ a t ] ucptt.com