Javascript在单击的class元素上切换类

Question

有点基本，我无法在Stack/Google上找到我想要的东西。。

使用普通javascript，我希望简单地在下面的.barBtn元素上切换一个类，特别是我单击的元素。

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'(。。。但我不确定如何正确地针对我单击的特定类元素。

---

上面的(第二个链接(是否是实现JS的最佳方式我不确定，但通常只是在一个干净/简单的方式之后。

任何帮助都将不胜感激。

感谢

Answer 1

您需要这个

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>