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