JavaScript 中的增量函数仅触发一次单击事件

Question

第一个 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>

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

JavaScript 中的增量函数仅触发一次单击事件

Click event firing only once for increment function in JavaScript

html

javascript

events

dom

onclick