MakotoArai

JavaScript的for循环如何记住i？

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

当前页面是本站的「Google AMP」版。查看和发表评论请点击：完整版 »