这是一个创建于 2726 天前的主题，其中的信息可能已经有所发展或是发生改变。
var page = document.getElementsByClassName('swiper-pagination-bullet');
for(var i = 0;i<page.length;i++){
page[i].innerHTML = i+1;
page[i].addEventListener('click',function(){
alert(i); //为什么这里 i 的值都等于 page.length
});
}
 |
1
ycycwx 2016-10-31 16:01:46 +08:00 via iPhone
好经典的面试题...
|
 |
2
mlkr 2016-10-31 16:05:14 +08:00 via Android
var 作用域的问题 ，换成 let 试试
|
 |
3
clearbug 2016-10-31 16:07:10 +08:00 via Android
好经典的面试题。。。你需要去看看闭包
|
 |
5
wubotao 2016-10-31 16:20:52 +08:00
因为执行点击事件时， i 的值已经变成了 page.length
i 不是取运行时的值，而是取 for 循环完成之后的值 |
 |
7
Sunyanzi 2016-10-31 16:24:24 +08:00
萌新你好 ... 槽点太多其实不太知道该从何说起 ... 我试试看用最简单的方法跟你解释下吧 ...
JavaScript 是一门只有「函数作用域」而没有「块级作用域」的语言 ... 你的变量也好闭包也罢 ... 只要它们是被定义在同一个函数里的 ... 就会始终各自指向同样的地址 ... 解决方法也很简单 ... 另开一个域就好 ... 方法如下 ... page[i].addEventListener('click',( function( i ) { return function() { alert(i); // 这样就不会相等啦 } } )( i ); |
|
8
Sunyanzi 2016-10-31 16:31:26 +08:00  1
一言以蔽之 ... 你的做法虽然看起来不像 ... 但其实就是把同一个闭包绑定了五次 ...
我的做法则创建了五个不同的闭包 ... 只有这一点区别 ... 如果你愿意更深入了解的话 ... 去看 this 吧 ... |
 |
10
ferrum 2016-10-31 16:37:59 +08:00
感觉每个不认真看书的 JavaScript 学习者都会遇到这样的问题……
|
 |
11
learnshare 2016-10-31 16:40:11 +08:00
经典，可以看看 let 和 var 的差异，以及闭包
|
 |
12
pouta OP @Sunyanzi 谢谢你的耐心解答 最终我是这么写的
var page = document.getElementsByClassName('swiper-pagination-bullet'); for(var i = 0;i<page.length;i++){ page[i].innerHTML = i+1; page[i].addEventListener('mouseover',function(){ var toPage = this.innerHTML; mySwiper.slideTo(toPage,1000,true); }); } |
 |
14
yoa1q7y 2016-10-31 16:49:59 +08:00
这样解释比较清楚
addEventListener 中的匿名函数，在这个 for 循环时并不会执行，而 i 始终只有一个，等到 for 循环完成时， i 就变成了 page.length ，等触发点击，执行函数的时候，取到的自然就是 page.length |
Select Language