提问者:小点点

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


我需要做一个网站,我可以添加一些东西到购物车。我不需要存储任何数据,所以只需要将一个类更改为'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>

谢谢你抽出时间!


共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>