for循环绑定事件,寻找索引的问题
在一个li 的列表当我们想给li绑定一个点击事件,你是否有这样的想法
function myfun(){
var li = document.getElementsByClassName("li");
for (var i = 0; i< li.length ;i++) {
li[i].onclick = function( ){
console.log(i);
}
}
}
但是你会发现,控制台最后答应出来的却是li 最终的长度,为什么呢?
其实当我们对li进行点击的时候,for循环已经结束,绑定到li上的事件是后执行的,这时候i值已经变成li的长度了。
为了解决这种情况我们大概有两种解决方法。
第一种方法,给每个li绑定一个n属性,n是随便起的,你可以写index都行,将每一个的索引存入li的n属性中;
for (var i = 0; i< li.length ;i++) {
li[i].n = i;
li[i].onclick = function( ) {
console.log(this.n);
}
}
第二种方法,用立即执行函数,把i安参数传进去,用该函数的参数绑定循环变量当前的值
for (var i = 0; i < li.length; i++){
li[i].onclick = function(n) {
return function() {
console.log(n)
}
}(i)
}