for循环取i值问题

最近开发遇到的一个问题,有五个imageclass属性标签,需要给每一个标签添加点击事件,实现点击后更改属性的效果,代码如下:

<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);     
     }     
  }