javascript - 使用 javascript 单击时切换类

Question

我正在尝试使用 js 创建一个简单的点击事件(无 jQuery)如果我运行以下代码，它仅适用于我单击的第一个项目。

    var listItem = document.querySelector('li');
    listItem.addEventListener('click', function(event) {
      this.classList.toggle('clicked');
    });

.clicked {
  color:red;
}

<ul id="mylist">
  <li>item 1</li>
  <li>item 2</li>
</ul>

我使用了替代方案

        var listItem = document.getElementById('mylist');
        listItem.addEventListener('click', function(event) {
          this.classList.toggle('clicked');
        });

    .clicked {
      background-color:red;
    }

        <ul id="mylist">
          <li>item 1</li>
          <li>item 2</li>
        </ul>

但这只是切换 ul 而不是我单击的 li。

如何定位列表中的所有 li，以便每次单击它们时都会切换其类别

Answer 1

您应该使用 querySelectorAll 而不是 querySelector，然后循环遍历所有列表项:

var listItems = document.querySelectorAll('li');
for(var i = 0; i < listItems.length; i++){
    listItems[i].addEventListener('click', function(event) {
      this.classList.toggle('clicked');
    });
}