如何通过类名分配 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

我将展示您在代码中遇到的一些错误，然后向您展示如何改进它以实现您想要的效果，并且我还将展示它可以与稍后动态添加的按钮一起使用：

首先，您需要将函数引用（它的名称）传递给addEventListener！您已经调用了该函数，并传递了它返回的任何内容。而不是：

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

应该是这样的：

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

第二个：document.getElementsByClassName("addtocart")返回一个NodeList，你不能操作它，你需要操作它的元素：document.getElementsByClassName("addtocart")[0], [1],...。

第三，我建议你使用data-... html 属性：

<button class="addtocart" id="addtocart" data-foo="<? echo $code; ?>">

这样您可以传递更多数据。现在您可以将$code 获取为：

document.getElementById('addtocart').dataset.foo

// el: the button element
function AddtoCart(el) {
    // this is the id:
    var id = el.id;

    // and this is an example data attribute. You can have as many as you wish:
    var foo = el.dataset.foo;
    alert(id + " (" + foo + ") added!");
}

// Try add a div or something around the area where all the buttons
// will be placed. Even those that will be added dynamically.
// This optimizes it a lib, as every click inside that div will trigger
// onButtonClick()
document.getElementById("buttons").addEventListener("click", onButtonClick);

// this shows that even works when you dynamically add a button later
document.getElementById('add').onclick = addButton;
function addButton() {
    var s = document.createElement("span");
    s.text = "Add to cart";
    var b = document.createElement("button");
    b.innerHTML = 'Third <span class="addtocartbutton">Add to cart</span>';
    b.className = "addtocart";
    b.id="third";
    b.dataset.foo="trio";
    // note the new button has the same html structure, class
    // and it's added under #buttons div!
    document.getElementById("buttons").appendChild(b);
}


// this will gett triggered on every click on #buttons
function onButtonClick(event) {
    var el = event.target;
    if (el && el.parentNode && el.parentNode.classList.contains('addtocart')) {
      // call your original handler and pass the button that has the
      // id and the other datasets
      AddtoCart(el.parentNode);
    }
}

<div id="buttons">
  <button class="addtocart" id="first" data-foo="uno">First <span class="addtocartbutton">Add to cart</span></button>
  <button class="addtocart" id="second" data-foo="duo">Second <span class="addtocartbutton">Add to cart</span></button>
</div>


<button id="add">Add new button</button>

Answer 2

虽然给出的答案是正确的，但还有另一种方法：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!");
}

Answer 3

您应该将click 事件附加到类addtocart 的每个元素上，因为getElementsByClassName() 返回具有给定类名的所有对象的数组，因此您可以使用for 循环遍历它们并将其与您想在点击时触发的功能（在我的示例中，此功能称为 my_function），请查看以下示例：

var class_names= document.getElementsByClassName("addtocart");

for (var i = 0; i < class_names.length; i++) {
    class_names[i].addEventListener('click', my_function, false);
}

希望这会有所帮助。

---

function my_function() {
     alert(this.id);
};

var class_names= document.getElementsByClassName("addtocart");

for (var i = 0; i < class_names.length; i++) {
    class_names[i].addEventListener('click', my_function, false);
}

<button class="addtocart" id="id_1">button 1</button>
<button class="addtocart" id="id_2">button 2</button>
<button class="addtocart" id="id_3">button 3</button>
<button class="addtocart" id="id_3">button 4</button>

Answer 4

实际上 Javascript 中的类是用于多选的，您应该像数组一样提供索引。

 <button class="addtocart"> <span id="addtocartbutton">Add to cart</span></button>
        <script type="text/javascript">
        document.getElementsByClassName("addtocart")[0].addEventListener("click", AddtoCart);        
        function AddtoCart() {
            alert("Added!");
        }
        </script>

另外你的第二个参数是错误的，不要使用括号。

加括号表示加载后会自动调用函数，加载后不再调用函数。

Answer 5

<html>
<head>
<script>
window.onload=function{
    var btn = document.getElementsByName("addtocartbtn")[0];
    btn.addEventListener("click", AddtoCart());
}

function AddtoCart() {
    alert("Added!");
}
</script>
</head>
<body >
<button class="addtocart" name ="addtocartbtn" id="<?php echo $code; ?>" > <span id="addtocartbutton">Add to cart</span></button>

</body>
</html>