Javascript 在点击的 class 元素上切换 class

Question

有点基础，我无法在 Stack/Google..

上准确找到我想要的东西

使用 vanilla javascript，我想简单地切换 .barBtn[=46= 下方的 class ] 元素，特别是我点击的元素。

示例 JS Fiddle：https://jsfiddle.net/t376kL4q/

<div class="container"> <div class="btnBar"> <div class="barBtn">Wishlist</div> <div class="barBtn">Collection</div> <div class="barBtn">Info</div> </div> </div> <div class="container"> <div class="btnBar"> <div class="barBtn">Wishlist</div> <div class="barBtn">Collection</div> <div class="barBtn">Info</div> </div> </div>

我试过改编在 Stack/Google 上找到的其他人的代码，例如这是我 JSFiddle 的：https://jsfiddle.net/5rmqucj3/

我改变的地方

document.getElementById("mytarget").

到

document.GetElementsByClassName("mytrigger").

（甚至'querySelector'）...但我不确定如何正确定位特定的 class 我点击的元素。

上面的 (2nd link) 是否是处理这个 JS 的最佳方法我不确定，但通常在一个clean/simple 实现方式。

如有任何帮助，我们将不胜感激。

谢谢

Answer 1

你需要this

var navclick = document.getElementsByClassName("mytrigger");
for (var i = 0; i < navclick.length; i++) {
  navclick[i].onclick = function(e) {
    this.classList.toggle('myactive');
  }
}

.myactive {
  background-color: blue;
  color: white;
}

<button class="mytrigger">Button
    </button>

<div id="mytarget">
  <p>Hello</p>
</div>

<button class="mytrigger">Button
    </button>

Javascript 在点击的 class 元素上切换 class

Javascript Toggle a class on clicked class element

javascript

class

toggle