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>

在避免forEach循环的同时发出问题

1 个答案: