js 的奇怪问题

[lraining]

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，为什么会出现这样的情况？

[IamJ]

闭包

[des]

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

[caomu]

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

[jianzhihao1996]

作用域问题

[rabbbit]

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

[heimeil]

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

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

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

[lraining]

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