我正在发布我的列表 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 的初学者。
最佳答案
首先,您必须使用 querySelectorAll
,而不仅仅是 querySelector
,因为这只会选择第一项,正如您已经注意到的那样;)
这是一个在您单击每个元素时切换类的示例:
document.querySelectorAll('li').forEach((listItem) => {
listItem.addEventListener('click', (event) => {
event.target.classList.toggle('done');
});
});
关于javascript - 想要在 JavaScript 中的数组的第二个元素上切换 css 类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58561328/