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

我看过，我真的不能把它赋给p标签的parent，因为我显然不希望p标签中的其他元素被赋予这个功能。

Answer 1

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

Answer 2

您应该将 click 事件附加到具有 class addtocart 的每个元素，因为 getElementsByClassName() return 给定 [=29] 的所有对象的数组=] name 这样你就可以使用 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 3

我会展示你在代码中遇到的一些错误，然后我会展示你如何改进它以便你可以实现你想要的，我还会展示它适用于动态添加的按钮后来：

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

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

应该是：

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

其次：document.getElementsByClassName("addtocart") returns一个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 4

实际上Javascript中的class是为了多选你应该像数组一样提供索引。

 <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

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

如何通过类名分配 javascript 函数

How to assign a javascript function by classname

javascript

addeventlistener