我想将此“优惠券剪辑”功能应用于此页面上的多个元素,而不为每个不同的元素创建单独的函数。在我添加的代码片段中,它适用于我的第一个“Buy 4,Save $ 2.00”但不适用于“4 Coupons”。
根据我的研究,我知道这一点
var coupon1 = document.querySelector('.coupon1');
只返回coupon1的FIRST实例,但我需要弄清楚如何将该函数应用于该类的所有元素(比如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>
你需要使用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() {...});
});
$(".coupon1").each(function(idx, elem){
elem.click(function()
{
...
});
});
$('。coupon1')。click(function(){stuff here})不能完成这项工作?
你可以想象:
$('.coupon1').click(function() {
$(this).hide();
$('.coupon2').show();
)})
甚至是普通班级的“优惠券”:
$('.coupon').click(function() {
$('.coupon1').toggle();
$('.coupon2').toggle();
)})
交替但可能不需要
看待
使用jQuery类选择器应用于任意数量的元素,如下所示:
var elements = $(".coupon1")
现在您可以绑定click事件,如下所示:
elements.click(function(){
var clickedCoupon = $(this);
var allOtherCoupons = $(".coupon1").not(this);
})