javascript - 如何通过类名分配一个javascript函数

Question

我有多个按钮(由 php 生成)用于购物车应用程序:

<button class="addtocart" id="<?php echo $code; ?>"> 
    <span id="addtocartbutton">Add to cart</span>
</button>

我想使用函数更新我的购物车:

function AddtoCart() {
    alert("Added!");
}

稍后，我想找到由调用它的按钮创建的 ID($code)(也不知道该怎么做，但也许这是另一个问题)。所以我尝试了这个:

document.getElementsByClassName("addtocart").addEventListener("click", AddtoCart());

但它不起作用。它正在使用 onclick 工作，但我知道通过创建 EventListener 来实现它的正确方法。另外，我不能在 jQuery 中使用 on() 函数，因为我被迫使用没有它的 jQuery 1.6 版。

我看过https://stackoverflow.com/a/25387857/989468而且我不能真正将它分配给 p 标签的父级，因为我显然不希望 p 标签中的其他元素被分配此功能。

Answer 1

虽然给出的答案是正确的，但还有另一种方式:Event Delegation

将监听器附加到一个单一的东西上，在本例中是文档 body，然后检查实际点击的是哪个元素:

警告:即时输入:未经测试

// Only needed *once* and items may be added or removed on the fly without
// having to add/remove event listeners.
document.body.addEventListener("click", addtoCart);

function addtoCart(event) {
    var target = event.target;

    while(target) {
      if (target.classList.contains('addtocart')) {
        break;
      }
      // Note: May want parentElement here instead.
      target = target.parentNode;
    }

    if (!target) {
       return;
    }

    var id = target.dataset.id;
    alert(id + " added!");
}