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

使用javascript点击切换类

1 个答案: