如何通过classname分配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 Version 1.6。

我查看了https://stackoverflow.com/a/25387857/989468 ，我无法将其分配给ap标签的父级，因为我显然不希望分配p标签中的其他元素这个功能。

Answer 1

虽然给出的答案是正确的，但还有另一种方式： 事件委派

将侦听器附加到SINGLE事物，在这种情况下是文档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 2

您应该将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 3

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

首先，您需要将函数引用（它的名称）传递给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 4

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

实际上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>

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

应用括号表示它会在加载时自动调用该函数，之后不会调用该函数。