用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，而不是我点击了李。

我怎样可以针对我的列表里的所有所以每一次我们说他们点击其类toggeled

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