javascript - 想要在 JavaScript 中的数组的第二个元素上切换 css 类

Question

我正在发布我的列表 html 代码:

<ul>
    <li>Notebook</li>
    <li>Jello</li>
    <li>Spinach</li>
    <li>Rice</li>
    <li>Birthday Cake</li>
    <li>Candles</li>
</ul>

我想在列表的每个元素上应用以下 css 类:

.done {
  text-decoration: line-through;
}

基本上我希望能够敲击它然后使用切换来撤消它。我只能为列表的第一个元素做到这一点。我如何申请第二个元素以及自 Class List. toggle 仅适用于仅选择数组第一个元素的查询选择器。我是 JavaScript 的初学者。

Answer 1

首先，您必须使用 querySelectorAll，而不仅仅是 querySelector，因为这只会选择第一项，正如您已经注意到的那样；)

这是一个在您单击每个元素时切换类的示例:

document.querySelectorAll('li').forEach((listItem) => {
    listItem.addEventListener('click', (event) => {
        event.target.classList.toggle('done');
    });
});