关于在for循环中绑定事件打印变量i是最后一次。
参考：
1.
2.
在编写JS的时候我们经常会遇到要对一系列元素进行事件绑定，循环对元素的事件进行赋值，在这个过程中我们会遇到一个问题，那就每个元素事件运行的时候变量怎么都是相同的值。
这里涉及到变量的作用域的问题，可以用闭包来解决这个问题。
这里举个简单的列子来说明：
- 数据
- 数据
- 数据
- 数据
- 数据
我们来给这些li添加一个onclick事件，弹出li是第几条数据
| 1 2 3 4 5 6 7 |
var list = document.getElementById("ulDemo").getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
var li = list[i];
li.onclick= function () {
alert("第" + (i + 1) + "条" + this.innerHTML);
}
}
|
结果弹出的都是第6条数据，这里的onclick函数中的变量i指向的内存地址，经过循环之后i变成了5，所有的li的点击事件都在同一个作用域中，我们可以通过闭包把i的作用域独立出来
| 1 2 3 4 5 6 7 |
var list = document.getElementById("ulDemo").getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
var li = list[i];
li.onclick= (function (index) {
return function () { alert("第" + (index + 1) + "条" + this.innerHTML) };
})(i);
}
|
其他写法
| 1 2 3 4 5 6 7 8 9 |
for (var i = 0; i < list.length; i++) {
var li = list[i];
var addClick = function (el, index) {
el.onclick= function () { alert("第" + (index + 1) + "条" + this.innerHTML) };
};
addClick(li, i);
}
|
| 1 2 3 4 5 6 7 |
for (var i = 0; i < list.length; i++) {
var li = list[i];
(function (el,index) {
el.onclick= function () { alert("第" + (index + 1) + "条" + this.innerHTML) };
})(li,i);
}
|