javascript - 多次调用函数时避免数字多次递增

Question

我写了一个数量选择器函数来显示在页面上。该页面可以打开一些模态框，每个模态框内需要有另一个数量选择器。

我在主页和模态框内调用该函数（以在显示模态框后启用该功能。）

当我在模态中调整数量，关闭模态，并在主页上调整数量时，数量增加/减少两倍（如果我要调用该函数3次，则增加3倍。）

有没有办法“重置”这些事件侦听器/函数中的每一个，只针对它们各自的元素进行调整？

我研究了“removeEventListener”，但在我的代码中实现它并没有任何乐趣。

到目前为止我的工作示例在这里（如果您单击按钮，您可以看到我的意思。）

https://codepen.io/777333/pen/zYoKYRN

const quantitySelector = () => {
  const qtyGroups = document.querySelectorAll('.qty-group');
  if(qtyGroups) {
    qtyGroups.forEach((qtyGroup) => {
      const qtyDecrease = qtyGroup.querySelector('[data-quantity-decrease]');
      const qtyIncrease = qtyGroup.querySelector('[data-quantity-increase]');
      const qtyInput    = qtyGroup.querySelector('[data-quantity-input]');
      const disableEnableDecrease = () => {
        if(qtyInput.value == 1) {
          qtyDecrease.disabled = true;
        } else {
          qtyDecrease.disabled = false;
        }
      };
      qtyDecrease.addEventListener('click', (event) => {
        event.preventDefault();
        if(qtyInput.value > 1) {
          qtyInput.value--;
        }
        disableEnableDecrease();
      });
      qtyIncrease.addEventListener('click', (event) => {
        event.preventDefault();
        qtyInput.value++;
        disableEnableDecrease();
      });
      qtyInput.addEventListener('keyup', () => {
        disableEnableDecrease();
      });
    });
  }
};
quantitySelector(); // called within main page
quantitySelector(); // called within modal

标签： javascript

Answer 1

您可以保存qtyInputon mousedownevent 的值，然后在增量中从保存的值而不是输入的当前值中添加或减去 1。

const quantitySelector = () => {
  const qtyGroups = document.querySelectorAll('.qty-group');
  if(qtyGroups) {
    qtyGroups.forEach((qtyGroup) => {
      const qtyDecrease = qtyGroup.querySelector('[data-quantity-decrease]');
      const qtyIncrease = qtyGroup.querySelector('[data-quantity-increase]');
      const qtyInput    = qtyGroup.querySelector('[data-quantity-input]');
      const disableEnableDecrease = () => {
        if(qtyInput.value == 1) {
          qtyDecrease.disabled = true;
        } else {
          qtyDecrease.disabled = false;
        }
      };
      let savedValue = null;
      const saveState = (evebt) => savedValue = Number(qtyInput.value);
      qtyDecrease.addEventListener('mousedown', saveState)
      qtyIncrease.addEventListener('mousedown', saveState)
      qtyDecrease.addEventListener('click', (event) => {
        event.preventDefault();
        event.stopPropagation();
        if(qtyInput.value > 1) {
          qtyInput.value = savedValue - 1;
        }
        disableEnableDecrease();
      });
      qtyIncrease.addEventListener('click', (event) => {
        event.preventDefault();
        event.stopPropagation();
        qtyInput.value = savedValue + 1;
        disableEnableDecrease();
      });
      qtyInput.addEventListener('keyup', () => {
        disableEnableDecrease();
        event.stopPropagation();
      });
    });
  }
};
quantitySelector();
quantitySelector();