我對 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>
3 回答
子衿沉夜
TA貢獻1828條經驗 獲得超3個贊
文檔.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>
蝴蝶刀刀
TA貢獻1801條經驗 獲得超8個贊
就像評論所說，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)
});
}
慕工程0101907
TA貢獻1887條經驗 獲得超5個贊
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 回答
- 0 關注
- 125 瀏覽
添加回答
舉報
0/150
提交
取消