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

Question

我需要做一个网站，我可以添加一些东西到购物车。我不需要存储任何数据，所以只需要将一个类更改为'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()">&#xe8cc;</button>

谢谢你抽出时间！

Answer 1

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

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>