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

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

将侦听器附加到SINGLE事物，在本例中为文档// 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!"); }，然后检查实际点击了哪个元素：

警告：动态输入：未经测试

-apple-system-short-body

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>

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

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

如何通过classname

5 个答案: