作者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/cn.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