如何使用querySelectorAll选中所有元素解决仅首个加入购物车按钮生效问题

问题原因 #

你使用的document.querySelector()仅会返回匹配指定选择器的第一个DOM元素，因此你只给首个购买按钮绑定了点击事件，其余按钮没有关联触发逻辑。

修复方案 #

使用document.querySelectorAll()获取所有匹配类名的按钮，遍历后为每个按钮单独绑定点击事件即可，现代浏览器通用写法如下：

// 选中所有符合条件的购买按钮
const cartButtons = document.querySelectorAll(".eshop_js-add-to-cart");

// 遍历所有按钮，逐个绑定点击事件
cartButtons.forEach(button => {
  button.onclick = function() {
    console.log("addToCart works");
    // 若需要获取当前按钮对应商品信息，可通过this读取按钮上的自定义属性，例如 this.dataset.productId
  };
});

如果需要兼容IE11等不支持NodeList.forEach方法的旧浏览器，可以使用普通for循环实现：

var cartButtons = document.querySelectorAll(".eshop_js-add-to-cart");
for (var i = 0; i < cartButtons.length; i++) {
  cartButtons[i].onclick = function() {
    console.log("addToCart works");
  };
}

内容的提问来源于stack exchange，提问作者Sadi Zeynalov