Question

我试图切换列表中的每个项目以通过CSS更改其样式，但我一直遇到错误。有人可以解释我的代码有什么问题吗？

HTML

    <button id="enter">Enter</button>
    <ul>
        <li>Notebook</li>
        <li>Apple</li>
        <li>Mango</li>
        <li>Banana</li>
        <li>BlackBerry</li>
        <li>Watermelon</li>
    </ul>

CSS

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

JavaScript

var li = document.querySelectorAll("li");

li.addEventListener("click" , function () {
    li.classList.toggle(".change");
})

未捕获的TypeError：li.addEventListener不是函数

Answer 1

您需要使用forEach()遍历所有元素。并在更改前删除.

var li = document.querySelectorAll("li");

for(let i = 0;i<li.length;i++){
  li[i].addEventListener('click',function(){
    li[i].classList.toggle("change");
  })
}

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

<button id="enter">Enter</button>
    <ul>
        <li>Notebook</li>
        <li>Apple</li>
        <li>Mango</li>
        <li>Banana</li>
        <li>BlackBerry</li>
        <li>Watermelon</li>
    </ul>

如何仅使用基本的JavaScript和DOM操作来切换各个<li>元素以更改其样式？

1 个答案: