时间戳

首页 > 解决方案 > 在循环中使用索引两次

javascript - 在循环中使用索引两次

问题描述


我试图找出为什么我不能在循环中使用两次索引的原因，
应该有一些非常简单的东西我错过了。
代码的结构是这样的： 

<p id="one">test</p>

<p class="two">a</p>
<p class="two">b</p>
<p class="two">c</p>

<script>
var one = document.getElementById("one");
var two = document.getElementsByClassName("two");
var i = 0;
while (i < two.length) {
  two[i].addEventListener("click", function() {two[i].innerHTML = one.innerHTML;});
  i++;
}
</script>

任何建议将不胜感激 =)

标签： javascriptloops

解决方案

问题是当

function() {two[i].innerHTML = one.innerHTML;});

i运行，循环将已经完成，所以two.length. 您需要使用闭包：

while (i < two.length) {
    (function(i) {
        two[i].addEventListener("click", function() {two[i].innerHTML = one.innerHTML;});
    )(i);
    i++;
}

或使用不同类型的循环并使用let：

for(let i = 0; i < two.length; i++){
    two[i].addEventListener("click", function() {two[i].innerHTML = one.innerHTML;});
}

推荐阅读