如何让 for 循环在 JavaScript 中创建多个 eventListener？ [重复]

Question

大家。

我正在尝试操作 DOM，因此每当用户单击类别时，我希望它们的背景变为粉红色。我试图仅将 eventListener 添加到这些类别中的第一个（其类别为“.select”），并且效果很好。然后我尝试为一个 for 循环编写代码，该循环可以为所有选项添加 eventListeners，但没有成功。此外，当我针对只有第一个选项受到影响的情况运行代码时，其字体颜色仍然没有改变。我该如何解决这些问题？这是我的代码段：

<div class="categorybox">
                <ul>
                    <li class="select"><a href="#">Love</a></li>
                    <li class="select"><a href="#">Health</a></li>
                    <li class="select"><a href="#">Beauty</a></li>
                    <li class="select"><a href="#">Gratitude</a></li>
                    <li class="select"><a href="#">Sleep</a></li>
                    <li class="select"><a href="#">Spiritual</a></li>
                    <li class="select"><a href="#">Happiness</a></li>
                    <li class="select"><a href="#">Money</a></li>
                    <li class="select"><a href="#">Blessing</a></li>
                </ul>
</div>

const category = document.querySelector(".select");

category.addEventListener("click", (e) => {
  e.preventDefault();
  category.style.background = "#eb3352";
  category.style.opacity = "0.7";
  category.style.color = "#fcfafa";
});

在上面的例子中，我的字体颜色没有变成我指定的颜色（#fcfafa）。

然后我尝试运行下面的代码。

const categories = document.querySelectorAll(".select");

for (var i = 0; i < categories.length; i++){
  categories[i].addEventListener("click", (e) => {
    e.preventDefault();
    categories[i].style.background = "#eb3352";
    categories[i].style.opacity = "0.7";
    categories[i].style.color = "#fcfafa";
}});

在上述情况下，所选列表项均未更改。

Answer 1

您使用

document.querySelectorAll

的代码不起作用有两个原因：

• 你的括号和大括号放错地方了。
• 您应该使用

  let

  而不是

  var

  ，这样

  i

  的范围就是循环块。对于

  var

  ，

  i

  只是以

  categories.length

  结束，这是在事件处理程序函数中看到的值。

for (let i = 0; i < categories.length; i++) {
    categories[i].addEventListener("click", (e) => {
        e.preventDefault();
        categories[i].style.background = "#eb3352";
        categories[i].style.opacity = "0.7";
        categories[i].style.color = "#fcfafa";
    });
}

但是，请考虑改用事件委托。这样，您只需将事件侦听器附加到父项，然后检查点击是否在其中一个子项上。

event.target

可用于访问被单击的元素。

document.querySelector('.categorybox > ul').addEventListener('click', e => {
  const li = e.target.closest('li.select');
  if (li) {
    e.preventDefault();
    li.style.background = "#eb3352";
    li.style.opacity = "0.7";
    li.style.color = "#fcfafa";
  }
});

<div class="categorybox">
  <ul>
    <li class="select"><a href="#">Love</a></li>
    <li class="select"><a href="#">Health</a></li>
    <li class="select"><a href="#">Beauty</a></li>
    <li class="select"><a href="#">Gratitude</a></li>
    <li class="select"><a href="#">Sleep</a></li>
    <li class="select"><a href="#">Spiritual</a></li>
    <li class="select"><a href="#">Happiness</a></li>
    <li class="select"><a href="#">Money</a></li>
    <li class="select"><a href="#">Blessing</a></li>
  </ul>
</div>