带按钮的加号/减号产品

Question

我编写了一个代码以模拟“购物车”，方法是使用“ +”“-”按钮添加/删除产品，该代码可以正常使用但仅对一种产品有效，我希望该代码可用于所有产品。

代码在这里：

const minusButton = document.querySelector('.minus-btn');
const plusButton = document.querySelector('.plus-btn');
const inputField = document.querySelector('.input-btn');

minusButton.addEventListener('click', function minusProduct() {
  const currentValue = Number(inputField.value);
  if (currentValue > 0) {
    inputField.value = currentValue - 1;
  } else currentValue = 0
});

plusButton.addEventListener('click', function plusProduct() {
  const currentValue = Number(inputField.value);
  inputField.value = currentValue + 1;
});

<!-- Product #1 -->
<div class="quantity">
  <button class="plus-btn" type="button" name="button" id="plus"><img src="plus.svg" alt="" /></button>
  <input type="text" value="0" id="input" />
  <button class="minus-btn" type="button" name="button" id="minus"><img src="minus.svg" alt="" /></button>
</div>

<!-- Product #2 -->
<div class="quantity">
  <button class="plus-btn" type="button" name="button" id="plus"><img src="plus.svg" alt="" /></button>
  <input type="text" value="0" id="input" />
  <button class="minus-btn" type="button" name="button" id="minus"><img src="minus.svg" alt="" /></button>
</div>

<!-- Product #3 -->
<div class="quantity">
  <button class="plus-btn" type="button" name="button" id="plus"><img src="plus.svg" alt="" /></button>
  <input type="text" value="0" id="input" />
  <button class="minus-btn" type="button" name="button" id="minus"><img src="minus.svg" alt="" /></button>
</div>

Answer 1

您需要对每个.quantity组执行代码操作。

但是您的html中有几个错误

• 您尝试访问未应用于任何元素的.input-btn
• 当您尝试将输入字段设置为0时，在声明currentValue后尝试将const设置为0
• 您对每个id组的按钮/输入使用相同的.quantity，这是无效的。

如此

const quantities = document.querySelectorAll('.quantity');

[...quantities].forEach(function(quantity) {
  const minusButton = quantity.querySelector('.minus-btn');
  const plusButton = quantity.querySelector('.plus-btn');
  const inputField = quantity.querySelector('.input-btn');

  minusButton.addEventListener('click', function minusProduct() {
    const currentValue = Number(inputField.value);
    if (currentValue > 0) {
      inputField.value = currentValue - 1;
    } else inputField.value = 0
  });

  plusButton.addEventListener('click', function plusProduct() {
    const currentValue = Number(inputField.value);
    inputField.value = currentValue + 1;
  });

});

<!-- Product #1 -->
<div class="quantity">
  <button class="plus-btn" type="button" name="button"><img src="plus.svg" alt="" /></button>
  <input type="text" value="0" class="input-btn" />
  <button class="minus-btn" type="button" name="button"><img src="minus.svg" alt="" /></button>
</div>

<!-- Product #2 -->
<div class="quantity">
  <button class="plus-btn" type="button" name="button"><img src="plus.svg" alt="" /></button>
  <input type="text" value="0" class="input-btn" />
  <button class="minus-btn" type="button" name="button"><img src="minus.svg" alt="" /></button>
</div>

<!-- Product #3 -->
<div class="quantity">
  <button class="plus-btn" type="button" name="button"><img src="plus.svg" alt="" /></button>
  <input type="text" value="0" class="input-btn" />
  <button class="minus-btn" type="button" name="button"><img src="minus.svg" alt="" /></button>
</div>

Answer 2

问题在于querySelector仅返回第一个匹配项。相反，您需要所有匹配项并遍历该列表，将点击侦听器添加到每个匹配项中。使用querySelectorAll查找元素，然后使用简单的for循环对其进行迭代：

const minusButtons = document.querySelectorAll('.minus-btn');
const plusButtons = document.querySelectorAll('.plus-btn');
const inputFields = document.querySelectorAll('.quantity input');

for (let i = 0; i < minusButtons.length; i++) {
  minusButtons[i].addEventListener('click', function minusProduct() {
    if (inputFields[i].value) {
      inputFields[i].value--;
    }
  });
}
for (let i = 0; i < minusButtons.length; i++) {
  plusButtons[i].addEventListener('click', function plusProduct() {
    inputFields[i].value++;
  });
}

.plus-btn::before {
  content: "+";
}

.minus-btn::before {
  content: "-";
}

<!-- Product #1 -->
<div class="quantity">
  <button class="plus-btn" type="button" name="button"></button>
  <input type="text" value="0" id="input" />
  <button class="minus-btn" type="button" name="button"></button>
</div>

<!-- Product #2 -->
<div class="quantity">
  <button class="plus-btn" type="button" name="button"></button>
  <input type="text" value="0" id="input" />
  <button class="minus-btn" type="button" name="button"></button>
</div>

<!-- Product #3 -->
<div class="quantity">
  <button class="plus-btn" type="button" name="button"></button>
  <input type="text" value="0" id="input" />
  <button class="minus-btn" type="button" name="button"></button>
</div>

请注意，您的代码也具有无用且更糟糕的重复 id值（HTML不允许）。我删除了那些。

Answer 3

对代码进行了一些整理，将ID更正为Class，因为不能使用重复ID。 还添加了一个监听文档加载的功能，以确保在页面准备就绪之前不会触发代码。 从querySelector更改为仅获取第一个元素（可以更改为输入法）

//Cannot use querySelector, it only returns the first element
// NOTE: We have to pass in the button, this allows us to get 
// parent and limit the scope of our search.
const inputField = (button) => {
  return button.parentElement.getElementsByClassName('input')[0];
};

// use this initializer to ensure the document is ready for us
// to search and add our event listeners
document.addEventListener('DOMContentLoaded', function() {
  setUpMinusButtons();
  setUpPlusButtons();
});

// Use a common method to assign our on clicks
function setUpButtons(buttonArr, eventAction) {
  for(let i=0; i<buttonArr.length; i++) {
    buttonArr[i].addEventListener('click', eventAction);
  }
}


function setUpMinusButtons() {
  let buttons = document.getElementsByClassName('minus-btn');

  setUpButtons(buttons, 
    function minusProduct(event) {
      let button = event.target;
      let iField = inputField(button);
      const currentValue = Number(iField.value);
      if (currentValue > 0) {
        iField.value = currentValue - 1;
      } else currentValue = 0
    }); 
}

function setUpPlusButtons() {
  let buttons = document.getElementsByClassName('plus-btn');

  setUpButtons(buttons, 
   function plusProduct(event) {
      let button = event.target;
      let iField = inputField(button);
      const currentValue = Number(iField.value);
      iField.value = currentValue + 1;
    }); 
}

<!-- Product #1  CHANGED our ID to Class for buttons-->
<div class="quantity">
  <button class="plus-btn" type="button" name="button" id="plus">
                 <img src="plus.svg" alt="" />
               </button>
  <input type="text" value="0" class="input">
  <button class="minus-btn" type="button" name="button" id="minus">
                 <img src="minus.svg" alt="" />
               </button>
</div>
<!-- Product #2 -->
<div class="quantity">
  <button class="plus-btn" type="button" name="button" id="plus">
                 <img src="plus.svg" alt="" />
               </button>
  <input type="text" value="0" class="input">
  <button class="minus-btn" type="button" name="button" id="minus">
                 <img src="minus.svg" alt="" />
              </button>
</div>
<!-- Product #3 -->
<div class="quantity">
  <button class="plus-btn" type="button" name="button" id="plus">
                 <img src="plus.svg" alt="" />
               </button>
  <input type="text" value="0" class="input">
  <button class="minus-btn" type="button" name="button" id="minus">
                 <img src="minus.svg" alt="" />
               </button>
</div>