javascript - 简单的for循环点击事件与for of循环不同

Question

我试图弄清楚为什么标准 for 循环在这种情况下不起作用，但 for of 循环却起作用。简单 for 循环的问题是，如果您打开控制台，它会返回类列表未定义的错误，因此不会将“open”类添加到 div - 请参阅下面的两个代码片段:

使用 for of 循环的代码:

if (document.querySelectorAll('.wrapper').length) {
  var els = document.querySelectorAll('.wrapper');

  for (var el of els) {
    var toggler = el.querySelector('a');

    toggler.addEventListener('click', function(e) {
      e.preventDefault();
      console.log(e.target);
      el.classList.toggle('open');
      e.target.classList.toggle('open');
    });
  }
}

<div class='wrapper'>
  <a href='#'>click me!</a>
</div>

使用标准 for 循环的代码(不起作用):

if (document.querySelectorAll('.wrapper').length) {
  var els = document.querySelectorAll('.wrapper');

  for (var i = 0; i < els.length; i++) {
    var toggler = els[i].querySelector('a');

    toggler.addEventListener('click', function(e) {
      e.preventDefault();
      console.log(e.target);
      els[i].classList.toggle('open');
      e.target.classList.toggle('open');
    });
  }
}

<div class='wrapper'>
  <a href='#'>click me!</a>
</div>

有人可以解释为什么标准 for 循环失败但 for of 循环有效吗？使用标准的 for 循环如何实现这一点？感谢您的帮助。

Answer 1

这与 var 如何提升到事件监听器外部并在循环期间重新定义，但不保留在事件监听器的范围内有关。更改为现代 const 和 let 变量声明将解决您的问题。

const els = document.querySelectorAll('.wrapper');

if (els.length) {
  for (let i = 0; i < els.length; i++) {
    const toggler = els[i].querySelector('a');

    toggler.addEventListener('click', function(e) {
      e.preventDefault();
      console.log(e.target);
      els[i].classList.toggle('open');
      e.target.classList.toggle('open');
    });
  }
}

<div class='wrapper'>
  <a href='#'>click me!</a>
</div>

<小时/>

如果您的安装太旧，不允许使用 let 或 const，您可以尝试以下方法:

var els = document.querySelectorAll('.wrapper');
if (els.length) {
  for (var i = 0; i < els.length; i++) {
    var el = els[i]; // Re-declare `el` inside the loop
    var toggler = el.querySelector('a');

    toggler.addEventListener('click', function(e) {
      e.preventDefault();
      console.log(e.target);
      el.classList.toggle('open');
      e.target.classList.toggle('open');
    });
  }
}

<div class='wrapper'>
  <a href='#'>click me!</a>
</div>