在 HTML 中自动添加或删除类答案

【问题标题】：Add or Remove class automatically in HTML在 HTML 中自动添加或删除类
【发布时间】：2020-12-09 22:59:39
【问题描述】：

我想在这些列表项中添加一个类，但条件是如果我在特定列表项中添加一个（活动）类

let getList=document.querySelectorAll("li")


getList.forEach(li=>{

    li.addEventListener("click", function(){
    
      li.classList.add("active")
    
    })
})

.list-item{
  height:80px;
  width:70px;
  background-color:black
}

.list-item li{
  color:white
}
.active{
  border:5px soild blue;
  list-style:none; 
  color:orange;
  
}

<body>
<ul class="list-item">
  
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
  
</ul>


</body>

列表标签中之前的活动类必须自动删除

【问题讨论】：

"必须自动删除列表标签中的前一个活动类" 你能分享你以前实现这一目标的尝试，以及具体在哪里那次尝试你被卡住了，以便社区能够指出你哪里出错了？
您还可以在这篇文章中找到更多信息：stackoverflow.com/questions/63485090/…

标签： javascript html css foreach

【解决方案1】：

您只需要从任何已设置的<li> 元素中删除“活动”类。否则，您最终会在多个元素上使用“活动”类。这是一种方法：

let getList=document.querySelectorAll("li")


getList.forEach(li=>{

    li.addEventListener("click", function(){
    
      // remove class from any currently active elements
      getList.forEach(li => { li.classList.remove("active"); });
    
      // then add the active class to the selected element
      li.classList.add("active")
    
    })
})

.list-item{
  height:80px;
  width:70px;
  background-color:black
}

.list-item li{
  color:white
}
.active{
  border:5px soild blue;
  list-style:none; 
  color:orange;
  
}

<body>
<ul class="list-item">
  
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
  
</ul>


</body>

【讨论】：

【解决方案2】：

这在 jquery 中很容易。

    $('ul.list-item li').on('click',function(){
      $('ul.list-item li').removeClass('active');
      $(this).addClass('active')
    }

这很好，因为选择器格式“ul.list-item li”明确排除了您页面上的任何其他“li”项目。

没有 jquery 你仍然可以这样做。在您的函数中，再次遍历所有其他 li 元素，这次删除活动类。

【讨论】：

这也是一个好方法..但我想用香草 javascript 来实现它

【解决方案3】：

委托更简洁

const list = document.querySelectorAll(".list-item li");
document.querySelector(".list-item").addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.tagName === "LI") {
    list.forEach(li => li.classList.remove("active"));
    tgt.classList.add("active");
  }
});

.list-item {
  height: 80px;
  width: 70px;
  background-color: black
}

.list-item li {
  color: white
}

.active {
  border: 5px soild blue;
  list-style: none;
  color: orange;
}

<ul class="list-item">
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ul>

【讨论】：

【解决方案4】：

你应该使用 onclick 事件并像这样继续 ->

从<li></li> 中的<ul></ul> 中删除所有活动类
将活动类添加到目标元素

【讨论】：

【解决方案5】：

像这样更新脚本。

let getList = document.querySelectorAll('li');
let prevLi = null;
getList.forEach(li => {
    li.addEventListener('click', function () {
        if (prevLi != null) {
            prevLi.classList.remove('active');
        }
        li.classList.add('active');
        prevLi = li;
    });
});

.list-item{
  height:80px;
  width:70px;
  background-color:black
}

.list-item li{
  color:white;
}
.active{
  border:5px soild blue;
  list-style:none; 
  color:orange !important;
  
}

<ul class="list-item">
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>

【讨论】：