如何通过 Javascript 中的 DOM 事件切换列表元素

Question

我有一个列表，其中包含 a 中的三个元素。我正在尝试打开和关闭一个 CSS 类，该类在单击列表元素时会触发文本。我创建了一个函数并使用 for 循环来检查被单击的列表元素的数组索引。

我定义了以下内容：

清单项目：

<ul>
        <li class="items line-through">Watch</li>
        <li class="items line-through">Shoes</li>
        <li class="items line-through">Cake</li>
</ul>

var list = document.getElementsByClassName("line-through");

创建了一个函数，用于在发生“单击”事件时根据索引从列表中切换数组元素

function checkItem(index) {
    console.log("event = " + index)
    list[index].classList.toggle("line-through");
    console.log("list = " + index);}

for (var i = 0; i <= list.length; i++) {
    console.log("i= " + i);
    list[i].addEventListener("click", checkItem(i));}

所以按照我的逻辑，我声明了 for 和 i 索引值为零，这是数组中第一个列表的值。然后我添加了打印件以检查它是否运行，然后检查是否单击了列表 0、1 或 2。如果是，运行函数并切换列表[i]。如果不是，则 i++ 并验证下一个。

问题是现在它立即将切换添加到列表中的第一个和最后一个项目。我也试过使用 querySelectorAll("li") 但它说 list[i] 是未定义的，我不明白为什么，因为在控制台中验证 list[0] 时它显示了第一个元素。

Answer 1

您可以重构您的代码并使用 this 关键字来定位被点击的元素，如下所示：

document.addEventListener('DOMContentLoaded', () => {
  // Execute the code after the HTML content is loaded
  
  const myList = document.querySelector('.my-list');
  const listElements = Array.from(myList.children);
  
  listElements.forEach( li => {
    li.addEventListener('click', checkItem);
  });
  
  function checkItem() {
    // The `this` keyword is the clicked element
    this.classList.toggle('line-through');
  }
});

<ul class="my-list">
        <li class="items line-through">Watch</li>
        <li class="items line-through">Shoes</li>
        <li class="items line-through">Cake</li>
</ul>

这会将事件侦听器添加到列表的所有子元素，并在单击的元素上切换 line-through 类。

请记住，在操作 DOM 时，您应该将 JS 代码包装在 DOMContentLoaded 事件侦听器中，以防止选择页面上尚不存在的元素。