javascript - 如何将一个函数应用于一个类的多个实例

Question

我想将此“优惠券剪辑”功能应用于此页面上的多个元素，而不为每个不同的元素创建单独的函数。在我添加的代码片段中，它适用于我的第一个“Buy 4, Save $2.00”，但不适用于“4 Coupons”。

根据我的研究，我知道这一点

var coupon1 = document.querySelector('.coupon1');

仅返回 coupon1 的第一个实例，但我需要弄清楚如何将该函数应用于该类的所有元素(例如 coupon1 类的 20 个元素)。

var coupon1 = document.querySelector('.coupon1');
var coupon2 = document.querySelector('.coupon2');

coupon1 ? coupon1
  .addEventListener('click', function() {
    coupon1.remove();
    coupon2.classList.remove('hide-coupon');
  }) : false;

<div class="coupon-product coupon1">
  <span id="coupon">Buy 4, Save $2.00</span>
</div>

<div class="coupon-product-clipped hide-coupon coupon2">
  <span id="clipped-coupon">Buy 4, Save $2.00</span>
</div>


<div class="coupon-product coupon1">
  <span id="coupon">4 Coupons</span>
</div>
<div class="coupon-product-clipped hide-coupon coupon2">
  <span id="clipped-coupon">4 Coupons</span>
</div>

Answer 1

您需要使用 document.querySelectorAll() 并循环遍历元素集合以绑定(bind) click 事件。

document.querySelectorAll('.coupon1').forEach(function(elem) {
    elem.addEventListener('click', function() {...});
})

正如@pointy提到的，某些环境不支持NodeList对象上的Array迭代方法，因此，您可以使用函数Array.from。

Array.from(document.querySelectorAll('.coupon1')).forEach(function(elem) {
    elem.addEventListener('click', function() {...});
})

或者类似这样的内容: Reference

var elements = document.querySelectorAll('.coupon1')
Array.from({ elements.length }, function(_, i) { return i}).forEach(function(index) {
    let elem = elements.item(index);
    elem.addEventListener('click', function() {...});
});