增加和减少产品数量功能

Question

我的增减数量函数有问题。增加数量效果很好，但减少数量就会破坏它。例如，我单击加号 19 次，然后单击减号，19 变为 0。

JAVASCRIPT代码：

const itemQuantitySystem = () => {
  let minus = document.querySelectorAll(".quantity .minus");
  let plus = document.querySelectorAll(".quantity .plus");
  
  plus.forEach(e => {
    let quantity = 1;
    e.addEventListener("click", () => {
      let number = e.previousElementSibling;
      quantity++;
      number.innerHTML = quantity;
    })
  })
  
  minus.forEach(e => {
    let quantity = parseInt(e.nextElementSibling.textContent);
    e.addEventListener("click", () => {
      console.log(quantity)
      let number = e.nextElementSibling;
      quantity--;
      number.innerHTML = quantity;
    })
  })
}

HTML 代码：

<div class="quantity">
    <div class="minus">-</div>
    <div class="number">1</div>
    <div class="plus">+</div>
</div>

在照片中，点击减号后，19立即变成0，然后-1，-2，然后我点击加号按钮，它变成20。

我尝试将变量放置在其他地方，但没有任何帮助。

Answer 1

您有两个独立的

quantity

变量，每个按钮一个。您需要一个共享的，每人一个

div.quantity

:

for (const systemElement of document.querySelectorAll(".quantity")) {
  const number = systemElement.querySelector(".number");
  const minus = systemElement.querySelector(".minus");
  const plus = systemElement.querySelector(".plus");
  
  let quantity = parseInt(number.textContent);

  plus.addEventListener("click", () => {
    quantity++;
    number.textContent = quantity;
  });

  minus.addEventListener("click", () => {
    quantity--;
    number.textContent = quantity;
  });
}

.quantity {
  display: flex;
}
.quantity .number {
  padding: 5px;
  border: 1px solid black;
}

<div class="quantity">
    <button class="minus">-</button>
    <div class="number">1</div>
    <button class="plus">+</button>
</div>