使用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');
    });
}