Question

我试图做到这一点，以便在单击li时：

单击的li获得“选定”类
相邻的li兄弟姐妹已删除“选定”类

目标是，每当单击li时，只有该li会获得“选定”类。

我编写了一个简单的for循环，并尝试向每个li添加一个事件侦听器，但是单击任何li都没有任何反应。为什么会发生这种情况，以及如何解决？

出于好奇，在这种情况下，使用const关键字是否比var更适用？

感谢您的帮助-可以在下面找到代码演示：

Codepen演示网址：https://codepen.io/anon/pen/MMgWZY

var menuLis = document.querySelectorAll("#top-nav > li");

for (let li of menuLis) {
  
  li.addEventListener("click", function(){
    // 1. Remove Class from All Lis
    for (let li of menuLis) {
      li.classList.removeClass('selected');
      console.log('class removed');
    }
    
    // 2. Add Class to Relevant Li
    this.classList.addClass('selected');
    console.log('class added');
  });
  
}

<ul id='top-nav'>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Answer 1

li.classList.remove是正确的，对于添加类，请使用add而不是addClass

您应将代码更改为：

    var menuLis = document.querySelectorAll("#top-nav > li");
    
    for (let li of menuLis) {
      
      li.addEventListener("click", function(){
        // 1. Remove Class from All Lis
        for (let li of menuLis) {
          li.classList.remove('selected');
          console.log('class removed');
        }
        
        // 2. Add Class to Relevant Li
        this.classList.add('selected');
        console.log('class added');
      });
      
    }

<ul id='top-nav'>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Answer 2

removeClass()和addClass()不是classList的方法。您正在寻找的是add()和remove()。

const对于防止意外变量覆盖很有用。在这种情况下，由于您没有重新分配menuLis的值，因此我将使用const

const menuLis = document.querySelectorAll("#top-nav > li");

for (let li of menuLis) {
  
  li.addEventListener("click", function(){
    // 1. Remove Class from All Lis
    for (let li of menuLis) {
      li.classList.remove('selected');
      console.log('class removed');
    }
    
    // 2. Add Class to Relevant Li
    this.classList.add('selected');
    console.log('class added');
  });
  
}

<ul id='top-nav'>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Answer 3

1）我将使用var（使用var来进行重新分配/更改。在不明确知道您的意图的情况下，我将使用var，因为我不知道您打算为此做些什么特定的分配），如果您在任何情况下都不重新分配/更改，则也可以使用const

2）这是使用jquery的解决方案：

var menuLis = $("#top-nav > li");

for (let i = 0; i < menuLis.length; i++) {
  menuLis[i].addEventListener("click", add_remove_class);
}


function add_remove_class() {
  // 1. Remove Class from All Lis
  menuLis.each(function(index) {
    $(this).removeClass("selected");
  });

  for (let i = 0; i < menuLis.length; i++) {

  }
  // add Class to clicked element
  $(this).addClass("selected");


}

li {
  cursor: pointer;
}

.selected {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<ul id='top-nav'>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

单击时，向此元素添加一个简单的类，并从其他元素中删除该类

3 个答案: