对于 JavaScript 中的增量函数，单击事件仅触发一次答案

【问题标题】：Click event firing only once for increment function in JavaScript对于 JavaScript 中的增量函数，单击事件仅触发一次
【发布时间】：2021-09-14 11:50:21
【问题描述】：

第一个if 条件多次按预期工作，但第二个和第三个条件只运行一次。如果单击fa-plus-square 元素，则数字仅增加一次，减号元素仅减少一次。为什么不进一步增加？

let input = document.querySelector(".quantity-input");
document.addEventListener('click', function(e) {
  if (!e.target.classList.contains('quantity-input')) {
    input.value = 1;
  }
  if (e.target.classList.contains('fa-plus-square')) {
    input.value = parseInt(input.value) + 1;
  }
  if (e.target.classList.contains('fa-minus-square')) {
    input.value = parseInt(input.value) - 1;
  }
});

<p class="quantity">
  <span class="quantity-text">Quantity </span><i class="far fa-minus-square quantity-icon">-</i>
  <input type="number" value="1" class="quantity-input" />
  <i class="far fa-plus-square quantity-icon">+</i>
</p>

【问题讨论】：

你好，我不太明白，你让家伙点击文档，你在寻找文档的类列表吗？
如果你点击.fa-plus-square，该元素不包含.quantity-input类。因此，您的侦听器所做的第一件事就是将值设置为 1。然后将其增加一。
@DafuQi e.target 是被点击的元素，而不是添加事件监听器的元素。这是事件委托。
他仍然将监听器放在他的整个页面中以仅检查“id：数量”标签中的内容？ @Barmar
@DafuQi 是的，有点过分了，但确实有效。

标签： javascript html dom events onclick

【解决方案1】：

您需要先检查加号和减号按钮，然后使用else if，这样您就只测试没有点击输入字段，如果两者都不成功。

否则，当您单击加号或减号按钮时，!e.target.classList.contains('quantity-input') 条件为真，因此在加减之前将输入设置回 1。

let input = document.querySelector(".quantity-input");
document.addEventListener('click', function(e) {
  if (e.target.classList.contains('fa-plus-square')) {
    input.value = parseInt(input.value) + 1;
  }
  else if (e.target.classList.contains('fa-minus-square')) {
    input.value = parseInt(input.value) - 1;
  }
  else if (!e.target.classList.contains('quantity-input')) {
    input.value = 1;
  }
});

<p class="quantity">
  <span class="quantity-text">Quantity </span><i class="far fa-minus-square quantity-icon">-</i>
  <input type="number" value="1" class="quantity-input" />
  <i class="far fa-plus-square quantity-icon">+</i>
</p>

【讨论】：

也可以 - 将 .quantity-input 添加到 +/- 按钮，因此它们不受重置功能的影响。输入的选择器可能需要更改为 input.quantity-input
谢谢，这行得通。我只需要在我的代码中将第一个条件转移到最后一个条件:)