我试图弄清楚为什么标准 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 循环如何实现这一点?感谢您的帮助。
最佳答案
这与 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>
关于javascript - 简单的for循环点击事件与for of循环不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59360526/