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()

Document方法querySelector() 返回文档中与指定选择器或选择器组匹配的第一个元素

您可以使用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>

Answer 2

就像注释中所说的那样，document.querySelector仅返回第一个元素或null。

这样做：

let addRoom = document.querySelectorAll(".addRoom");
let subtractRoom = document.querySelectorAll(".subtractRoom");

addRoom.forEach(btn => {
    setInputValue(btn, true)
  }
)

subtractRoom.forEach(btn => {
    setInputValue(btn, false)
  }
)

function setInputValue(btn, plus) {
  const input = btn.parentNode.querySelector('input')
  btn.addEventListener('click', () => {
    const originalValue = parseInt(input.value)
    input.value = String(plus ? originalValue + 1 : originalValue - 1)
  });
}

Answer 3

将类clickable添加到每个+和-

选择所有clickable并在每个元素上添加事件监听器

document.querySelectorAll(`.clickable`).forEach(el => el.addEventListener(`click`, handleClick))

handleClick函数如下所示

const handleClick = (e) => {

  // selecting a closest input
  const input = e.target.parentElement.parentElement.querySelector(".roomsAmmount");

  // parsing value 
  let newValue = parseInt(input.value);

  // if clicked element has class plusOne
  if (e.target.classList.contains(`plusOne`)) {
    newValue++; // increase
  }

  // if clicked element has class subtractOne
  if (e.target.classList.contains(`subtractOne`)) {
    newValue--; // decrease
  }

  // update value
  input.value = newValue;

}

工作示例https://jsfiddle.net/yqp5zx1b/1/

我不知道为什么计数器只能在一个按钮上工作，而不能在另一个按钮上工作

3 个答案: