for循环取i值问题
最近开发遇到的一个问题,有五个image
class属性标签,需要给每一个标签添加点击事件,实现点击后更改属性的效果,代码如下:
<body>
<div class="box">
<div class="images"><img src="./img/image(1).jpg" alt=""><span>冰菓</span></div>
<div class="images"><img src="./img/image(2).jpg" alt=""><span>高坂桐乃</span></div>
<div class="images"><img src="./img/image(3).jpg" alt=""><span>黑猫</span></div>
<div class="images"><img src="./img/image(4).jpg" alt=""><span>高坂桐乃</span></div>
<div class="images"><img src="./img/image(5).jpg" alt=""><span>黑猫</span></div>
</div>
</body>
但是,每次都输出循环输出i都是5
解决办法
这是因为js事件处理器在线程空闲时间不会运行,导致最后运行的时候输出的都是i最后的值
所以需要将i存在每个image上
for( var i=0; i<images.length; i++ ) {
images[i].i = i;
images[i].onclick = function() {
alert(this.i);
}
}