单击并在数组上的两个类之间切换(没有JQuery)

Question

我需要创建一个网站，在那里我可以向购物车添加一些东西。我不需要存储任何数据，所以只需将类更改为"addedInCart"就足够了。这就是我目前所拥有的，但还没有奏效。我知道我得到的所有类名都会以数组的形式返回。我只是不知道如果点击按钮该怎么改。我尝试了很多addEventListener和toggle，但我刚刚开始编码，还没有完全清楚。我不习惯使用Jquery，只使用HTML和Javascript。

这就是我在Javascript中所拥有的：

var buyMe = document.getElementsByClassName("materials-icon");
function shoppingcart() {
for(let i = 0; i < buyMe.length; i++){
buyMe[i].classList.toggle("addedInCart");
buyMe[i].addEventListener("click", toggleClass, false)
}
}

这就是我的按钮的样子：

<button class="material-icons" onclick="shoppingcart()">&#xe8cc;</button>

感谢您抽出时间！

Answer 1

使用事件委派可以使用一个处理程序。使用数据属性验证该按钮是否为用于添加到购物车的按钮。类似于：

document.addEventListener("click", handle);
function handle(evt) {
const origin = evt.target;
if (origin.dataset.cartToggle) {
//  ^ if element has attribute data-cart-toggle...
origin.classList.toggle("addedInCart");
//               ^ ... toggle the class
}
};

.addedInCart {
color: red;
}
.addedInCart:after {
content: " (in cart, click to remove)";
}

<button class="material-icons" data-cart-toggle="1">buy</button>
<button class="material-icons" data-cart-toggle="1">buy</button>
<button class="material-icons" data-cart-toggle="1">buy</button>