一个小例子
直接使用for循环
for(var i=0; i< 6; i++){
console.log(i);
}
打印的结果为:1 2 3 4 5 6
但是结合到某一实例,或者创建相关DOM元素后
<div id="box">
<div>盒子1</div>
<div>盒子2</div>
<div>盒子3</div>
<div>盒子4</div>
</div>
<script type="text/javascript">
var box=$("#box").find("div");
for(var i=0;i<box.length;i++){
box[i].on('click',function(){
console.log(i);
})
}
</script>
打印结果为:4
这是因为当click被调用的时候,for循环已经结束了,此时i的值为循环后的最终值:4
那么怎么解决这个问题呢?
第一种方式:通过index,添加“正确”的索引值
for(var i=0;i<box.length;i++){
box[i].index=i;//添加“正确”的索引值
box[i].on('click',function(){
console.log(i);
})
}
第二种方式:通过闭包
for(var i=0;i<box.length;i++){
(function(){
box[i].on('click',function(){
console.log(i);
})(i) //闭包
})
}
()(i)
在javascript中,只有函数内部的子函数才能读取局部变量