使用简单的Javascript切换无序列表项的类

Question

我正在开发一个项目，该项目要求我每次单击 li 元素的类。

我有以下代码：

   type Props = Readonly<{
      items: ReadonlyArray<Item>
    }>

var list = document.getElementById('nav').children[0];
for (var i = 0; i < list.children.length; i++) {
  var el = list.children[i];
  el.addEventListener("click", function() {

    el.classList.toggle("myClass");
  });
}

但是此代码仅将类添加到最后一个 li 元素中，无论我单击哪个li，我都从Use JavaScript to change the class of an <li>获得了引用，并尝试根据自己的需要定制该类，但是这里有问题。任何帮助将不胜感激。

Answer 1

将el.classList.toggle("myClass");更改为this.classList.toggle("myClass");，由于它引用了当前元素，因此它将起作用

Answer 2

您不应在循环内附加click事件，请在循环外创建一个函数，并在附加click事件时调用它：

var list_items = document.querySelectorAll('#nav>ul>li');

for (var i = 0; i < list_items.length; i++) {
  list_items[i].addEventListener("click", toggle);
}

function toggle() {
  this.classList.toggle("myClass");
}

.myClass {
  color: green;
}

<div id='nav'>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</div>

Answer 3

将循环内的函数更改为IIFE，以解决仅将最后一个元素绑定到函数的闭包问题。

var list = document.getElementById('nav').children[0];
for (var i = 0; i < list.children.length; i++) {
  list.children[i].addEventListener("click", (function(j) {
    return function() {
      var el = list.children[j];
      el.classList.toggle("myClass");
    }

  }(i)));
}

.myClass {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='nav'>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</div>

Answer 4

var li = document.querySelectorAll("li");
for(var i  of li){
i.addEventListener("click",function(){
this.classList.toggle("myClass")
})
};

.myClass {
  color: green;
}

<div id='nav'>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</div>