addEventListener单击时，选择不“this”

addEventListener on click, choose not `this`

本文关键字：this 选择 单击 addEventListener      更新时间：2023-09-26

我有一个带有addEventListener函数的循环：

var tabs = document.getElementsByClassName('tab');
for (var t = 0; t < tabs.length; t++) {
  tabs[t].addEventListener('click', function(){
    this.className += ' active';
  }, false);
}

正如您所看到的，我想将.active类名添加到我的li点击事件中。但是，我也想从我的其他li类中删除.active类。我该怎么做这个把戏？

下面是一个例子。

var tabs = document.getElementsByClassName('tab');
for (var t = 0; t < tabs.length; t++) {
  tabs[t].addEventListener('click', function(){
    this.className += ' active';
  }, false);
}
.tabs {
  display: inline-block;
  ul {
    list-style-type: none;
    li {
      cursor: pointer;
      float: left;
      padding: 10px 40px;
      background: #FDFDFD;
      &.active {
        background: #8F95B0;
        color: #FFF;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
      }
    }
  }
}
<div class="tabs">
  <ul>
    <li class="tab active">Product Overview</li>
    <li class="tab">Specifications</li>
    <li class="tab">Related products</li>
  </ul>
</div>

首先尝试从所有元素中删除active类，

var tabs = document.getElementsByClassName('tab');
for (var t = 0; t < tabs.length; t++){
  tabs[t].addEventListener('click', function(){
    //~~~~~~~~~~~~~~~~~~~~~
    //select all the elements with class active
    Array.from(document.querySelectorAll(".active")).forEach(function(itm){
        itm.classList.remove("active")
    });
    //And remove the class active from it.
    //~~~~~~~~~~~~~~~~~~~~~
    this.classList.add('active');
  }, false);
}

演示

由于您只有一个活动类要设置，您可以像下面这样更改代码，

var tabs = document.getElementsByClassName('tab');
for (var t = 0; t < tabs.length; t++){
  tabs[t].addEventListener('click', function(){
   document.querySelector(".active").classList.remove("active")
   this.classList.add('active');
  }, false);
}

演示

这是您的固定jsFiddle:

我刚刚添加了一个函数来访问您缓存的选项卡，并删除以前选择的，然后点击应用新的类。

var tabs = document.getElementsByClassName('tab');
function changeSelectedTab(tabEl) {
    for (var t = 0; t < tabs.length; t++) {
        tabs[t].className = 'tab';
    };
  
    tabEl.className += ' active';
}
for (var t = 0; t < tabs.length; t++) {
    tabs[t].addEventListener('click', function(){
        changeSelectedTab(this);
    }, false);
}
.tabs {
    display: inline-block;
    ul {
        list-style-type: none;
        li {
            cursor: pointer;
            float: left;
            padding: 10px 40px;
            background: #FDFDFD;
            &.active {
                background: #8F95B0;
                color: #FFF;
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
            }
        }
    }
}
<div class="tabs">
    <ul>
        <li class="tab active">Product Overview</li>
        <li class="tab">Specifications</li>
        <li class="tab">Related products</li>
    </ul>
</div>

相关文章：