单击并在阵列上的两个类之间切换（无 JQuery）

Question

我需要制作一个可以将商品添加到购物车的网站。我不需要存储任何数据，所以只需将 class 更改为 'addedInCart' 就足够了。这是我到目前为止所拥有的，但它还没有用。我知道我得到的所有 class 名字都在一个数组中返回。如果单击按钮，我只是不知道如何更改它们。我对 addEventListener 和切换器进行了很多尝试，但我才刚刚开始编码，对我来说还不是一切都清楚。我不想用 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

使用 event delegation to be able to use one handler. Use a data-attribute 验证按钮是否为添加到购物车的按钮。类似于：

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>

单击并在阵列上的两个类之间切换（无 JQuery）

Click and toggle between two classes on an array (no JQuery)

html

javascript

class

button

toggle

单击并在阵列上的两个 类 之间切换（无 JQuery）

Click and toggle between two classes on an array (no JQuery)

html

javascript

class

button

toggle

单击并在阵列上的两个类之间切换（无 JQuery）