javascript - 我不明白为什么计数器在一个按钮上起作用而在另一个按钮上不起作用

Question

我对 Javascript 和 JQuery 很陌生，我似乎无法弄清楚为什么一个按钮的计数器会递增，但相同的代码对其他按钮不起作用。任何帮助将不胜感激。谢谢!

// JAVASCRIPT/JQUERY (to increment by 1)
let addRoom = document.querySelector(".addRoom");
let subtractRoom = document.querySelector(".subtractRoom");
let input = document.querySelector(".roomsAmmount");

addRoom.addEventListener('click', () => {
  input.value = parseInt(input.value) + 1;
});

subtractRoom.addEventListener('click', () => {
  input.value = parseInt(input.value) - 1;
});

/*.addRoom,.subtractRoom{position:absolute;font-size:1.3em;width:50%;height:45px;z-index:1;display:flex}.roomsAmmount{position:absolute;width:50px;height:45px;right:-60px;border:none;border-bottom:1px solid #f4b494;outline:0;font-size:1.4em;text-align:center;background-color:transparent;color:#fff}
*/

<div class="bedroomsButton">Bedrooms
  <div class="addRoom">
    <span class="plusOne">+</span>
  </div>
  <div class="subtractRoom">
    <span class="subtractOne">-</span>
  </div>
  <input class="roomsAmmount" type="number" value="0">
</div>

<div class="bathroomsButton">Bathrooms
  <div class="addRoom">
    <span class="plusOne">+</span>
  </div>
  <div class="subtractRoom">
    <span class="subtractOne">-</span>
  </div>
  <input class="roomsAmmount" type="number" value="0">
</div>

Answer 1

Document.querySelector()

The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors

您可以使用 querySelectorAll() 定位所有元素，然后使用 forEach() 循环它们附加事件处理程序。

// JAVASCRIPT/JQUERY (to increment by 1)
let addRoom = document.querySelectorAll(".addRoom");
let subtractRoom = document.querySelectorAll(".subtractRoom");

addRoom.forEach((el)=>{
  el.addEventListener('click', (e) => {
    let input = e.target.closest('.bedroomsButton,.bathroomsButton').querySelector(".roomsAmmount");
    input.value = parseInt(input.value) + 1;
  });
});

subtractRoom.forEach((el)=>{
  el.addEventListener('click', (e) => {
    let input = e.target.closest('.bedroomsButton,.bathroomsButton').querySelector(".roomsAmmount");
    input.value = parseInt(input.value) - 1;
  });
});

<div class="bedroomsButton">Bedrooms
  <div class="addRoom">
    <span class="plusOne">+</span>
  </div>
  <div class="subtractRoom">
    <span class="subtractOne">-</span>
  </div>
  <input class="roomsAmmount" type="number" value="0">
</div>

<div class="bathroomsButton">Bathrooms
  <div class="addRoom">
    <span class="plusOne">+</span>
  </div>
  <div class="subtractRoom">
    <span class="subtractOne">-</span>
  </div>
  <input class="roomsAmmount" type="number" value="0">
</div>