如何将一个函数应用于类的多个实例答案

【问题标题】：How to apply one function to multiple instances of a class如何将一个函数应用于类的多个实例
【发布时间】：2018-03-02 18:46:12
【问题描述】：

我想将此“优惠券剪辑”功能应用于此页面上的多个元素，而不为每个不同的元素创建单独的功能。在我添加的代码 sn-p 上，它适用于我的第一个“买 4，节省 2.00 美元”，但不适用于“4 优惠券”。

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

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>

【问题讨论】：

.querySelector() 不是 jQuery 方法；它内置于浏览器中。也就是说，您正在寻找返回元素列表的.querySelectorAll()。
如果你得到一个元素数组，只需迭代每个项目。

标签： javascript html user-interface frontend

【解决方案1】：

您需要使用document.querySelectorAll() 并循环遍历元素集合以绑定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() {...});
});

【讨论】：

是不是有些环境不支持NodeList对象的Array迭代方法？
@Pointy 是的，我们可以使用函数Array.from
嗯...由于某种原因，每当我使用这些功能中的任何一个时，我的“coupon1”类工作中的实例都没有...我完全不知道为什么这不起作用因为逻辑是有道理的。谢谢你的回答！
我也有多个 coupon2 实例，所以我想知道我是否也需要对其进行一些操作。不过谢谢你的回答！

【解决方案2】：

$(".coupon1").each(function(idx, elem){
    elem.click(function()
    {
        ...
    });
});

【讨论】：

这可行，但 jQuery 会自动为您迭代；你不需要.each()，除非你需要为每个元素做不同的事情。

【解决方案3】：

$('.coupon1').click(function() { stuff here}) 不起作用？

你可以想象：

$('.coupon1').click(function() { 
   $(this).hide();
   $('.coupon2').show();
)})

甚至是普通的“优惠券”类：

$('.coupon').click(function() { 
   $('.coupon1').toggle();
   $('.coupon2').toggle();
)})

替代但可能不需要

注意

【讨论】：

【解决方案4】：

使用 jQuery 类选择器应用到尽可能多的元素，例如：

var elements = $(".coupon1")

现在可以绑定点击事件了，如下：

elements.click(function(){
    var clickedCoupon = $(this);
    var allOtherCoupons = $(".coupon1").not(this);
})

【讨论】：