Question

我创建了一个按钮，可以在单击时更改文本。但是，该操作仅适用于页面上的第一个按钮。代码中位于代码下方的任何按钮，具有相同的操作，将无法正常工作。如何更改JS，以允许事件的多次触发？

谢谢！

HTML：

<div class="addtocart">
   <a href="#" class="add-to-cart">
      <div class="pretext">
      ADD TO CART
      </div>
   </a>
   <div class="pretext done">
      <div class="posttext"><i class="fas fa-check"></i> ADDED</div>
   </div>
</div>

JS：

<script>
const button = document.querySelector(".addtocart");
const done = document.querySelector(".done");
console.log(button);
let added = false;
button.addEventListener("click", () => {
  if (added) {
    done.style.transform = "translate(-110%) skew(-40deg)";
    added = false;
  } else {
    done.style.transform = "translate(0px)";
    added = true;
  }
});
</script>

Answer 1

我认为您想要的是select all button elements。使用querySelectorAll。

这将返回与查询匹配的DOM元素数组。然后循环浏览，并将事件侦听器添加到每个侦听器。

以上代码的作用是，使用.addtocart选择DOM元素的第一个实例，而不是每个实例，然后添加事件侦听器。

Answer 2

Here是工作代码的示例。您需要使用此关键字来获取所需的内容。

<div class="addtocart">
   <a href="#" class="add-to-cart" id="addToCardItem1"  onclick="addToCart(this)">
      <div class="pretext">
      ADD TO CART
      </div>
   </a>
</div>
<div class="addtocart"  id="addToCardItem1" onclick="addToCart(this)">
   <a href="#" class="add-to-cart">
      <div class="pretext">
      ADD TO CART
      </div>
   </a>
</div>


<script>
function addToCart(elem) {
    alert(elem.id);
}
</script>

JS按钮仅在第一个元素上触发

2 个答案: