我需要做一个网站，我可以添加一些东西到购物车。我不需要存储任何数据，所以只需要将一个类更改为'Added Incart'就足够了。这是我目前所拥有的，但它还不起作用。我知道我得到的所有类名都会回到一个数组中。我只是不知道如何改变他们，如果按钮被点击。我用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()"></button>
谢谢你抽出时间！
使用事件委派可以使用一个处理程序。使用数据属性验证按钮是否是要添加到购物车的按钮。类似于：
null
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>