js 的奇怪问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 2649 天前的主题，其中的信息可能已经有所发展或是发生改变。

for(var i=0; i<6; i++){
var button = $("#"+ categories[i]);
button.attr("index", i);
button.click(function(){
alert(button.attr("index"));
});
}
如上代码所示，循环一个数组找出对应 id 的 button(自定义的 div)，给每个 button 加入自定义属性 index，然后绑定事件，结果点击所有的 button 都是最后一个 button，点击 button 弹出的 alert 显示都是 5，为什么会出现这样的情况？

7 条回复 2018-10-04 19:51:26 +08:00

IamJ

2018-10-04 19:25:25 +08:00 via iPhone

闭包

des

2018-10-04 19:28:10 +08:00 via Android

for(let i=0; i<6; i++){

caomu

2018-10-04 19:29:47 +08:00 via Android

button.click 绑定应该放 for 外面吧。。。

daz996

2018-10-04 19:30:27 +08:00 via Android

作用域问题

rabbbit

2018-10-04 19:39:53 +08:00

button.click(function(){
alert(button.attr("index"));
});
---->
button.click(
(function(button) {
return function() {
alert(button.attr("index"));
}
})(button)
);

heimeil

2018-10-04 19:40:13 +08:00

你 click 里引用的 button 是上层的，每次循环都改变了，当你产生 click 事件的时候循环早就结束了，自然是引用到了循环最后一次产生的 button。

jQuery 方式：
alert($(this).attr("index"));

JS 原生方式：
button.click(function() {
alert(this.attr("index"));
}.bind(button));

lraining

2018-10-04 19:51:26 +08:00

感谢 6 楼，是的，应该是用$(this)代替 button，很明显的问题，还是得细心一些