Question

我想应用这个＆＃39;优惠券剪辑＆＃39;函数到此页面上的多个元素，而不为每个不同的元素创建单独的函数。在我添加的代码片段中，它适用于我的第一个＆＃34; Buy 4，节省$ 2.00＆＃34;但不适用于＆＃34; 4优惠券＆＃34;。

从我的研究中我知道这个

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

只返回coupon1的FIRST实例，但我需要弄清楚如何将该函数应用于该类的所有元素（比如coupon1类的20个元素）。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 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() {...});
});

Answer 2

function calculate(exp) {
  const opMap = {
    '+': (a, b) => { return parseFloat(a) + parseFloat(b) },
    '-': (a, b) => { return parseFloat(a) - parseFloat(b) },
  };
  const opList = Object.keys(opMap);

  let acc = 0;
  let next = '';
  let currOp = '+';

  for (let char of exp) {
    if (opList.includes(char)) {
      acc = opMap[currOp](acc, next);
      currOp = char;
      next = '';
    } else {
      next += char;
    } 
  }

  return currOp === '+' ? acc + parseFloat(next) : acc - parseFloat(next);
}

Answer 3

$（'。coupon1'）。click（function（）{stuff here}）不能完成这项工作？

你可以想象：

special

或甚至使用普通班级'优惠券'：

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

交替但可能不需要

方面

Answer 4

使用jQuery类选择器应用于任意数量的元素，如下所示：

var elements = $(".coupon1")

现在你可以绑定点击事件了：

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

如何将一个函数应用于类

4 个答案: