用javascript点击课程 [英] toggle class on click with javascript

问题描述

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

  var listItem = document.querySelector（'li'）; listItem.addEventListener（'click'，function（event）{this.classList.toggle（'clicked'）;}）;  

  .clicked {color：red;}  

 < ul id =mylist> < li>商品1< / li> < li> item 2< / li>< / ul>  

p>我使用了

  var listItem = document.getElementById（'mylist'）; listItem.addEventListener（'click'，function（event）{this.classList.toggle（'clicked'）;}）;  

  .clicked {background-color：red; }  

 < ul id =mylist> < li>商品1< / li> < li>商品2< / li> < / ul>  

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

我如何定位列表中的所有li，这样每次他们被点击时，他们的类都会被关闭

解决方案

您应该使用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'）; 
}）; 
} 
  

I am trying to create a simple on click event using js (no jQuery) If I run the below code it only works for the first item I click.

    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>

I looked at an alternative using

        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>

but this just toggles the ul rather than the li I clicked.

How can I target all li in my list so that each time they are clicked their class is toggeled

解决方案

You should use querySelectorAll instead of querySelector, then loop over all list items:

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

这篇关于用javascript点击课程的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！