避免forEach循环时出现问题[重复]

Question

这是我上一个问题javascript dynamically adding and removing classes的扩展

根据给出的答案，它使用forEach 循环，但我尝试使用for 循环并实现相同：

function test() {
  var paragraphs = document.querySelectorAll("#divid p[id ^= 'p']");
  for(index =0; index < paragraphs.length; index++) {
    paragraphs[index].addEventListener('click', (e) => {
      for (i = 0; i < index; i++) {
        paragraphs[i].classList.remove('active');
      }
      for (i = index; i < paragraphs.length; i++) {
        paragraphs[i].classList.add('active');
      }
    });
  }
}

但我收到以下错误：

11 Uncaught TypeError: Cannot read property 'classList' of undefined
    at HTMLSpanElement.paragraphs.(anonymous function).addEventListener

我还想删除上面代码中的特殊符号=> 并解决问题。

Answer 1

您遇到了经典的“循环内闭包”问题，您在循环内创建的所有闭包（作为事件处理程序创建的函数）之间的循环索引变量是相同的。

解决方案是将事件处理函数包装在一个立即调用的函数表达式中，将索引变量传递给该函数表达式，将其当前值绑定到范围。

function test() {
  var paragraphs = document.querySelectorAll("#divid p");
  for (index = 0; index < paragraphs.length; index++) {
    paragraphs[index].addEventListener('click', (function(index) {
      return function() {
        var i;
        for (i = 0; i < index; ++i) {
          paragraphs[i].classList.remove('active');
        }
        for (i = index; i < paragraphs.length; ++i) {
          paragraphs[i].classList.add('active');
        }
      }
    })(index));
  }
}

test();

p.active {
  color: red;
}

<div id="divid">
  <p>p1</p>
  <p>p2</p>
  <p>p3</p>
  <p>p4</p>
  <p>p5</p>
  <p>p6</p>
</div>