如何使用普通 Javascript 的加減按鈕更改數量

Question

 let plus_btns = document.querySelectorAll('#plus-button'); let minus_btns = document.querySelectorAll('#minus-button'); let qty_inputs = document.querySelectorAll('#quantity'); plus_btns.forEach(btn=>{ btn.addEventListener('click', ()=>{ qty_inputs.forEach(qty=>{ qty.value++ }) }) }) minus_btns.forEach(btn=>{ btn.addEventListener('click', ()=>{ qty_inputs.forEach(qty=>{ if(qty.value > 1){ qty.value-- } else{ qty.value=0; } }) }) })

 <div class="cart-totals"> <input type="button" value="-" id="minus-button" for="quantity"> <input type="number" id="quantity" value="1" min="0"> <input type="button" value="+" id="plus-button" for="quantity"> <input type="button" value="-" id="minus-button" for="quantity"> <input type="number" id="quantity" value="1" min="0"> <input type="button" value="+" id="plus-button" for="quantity"> </div>

如何更改特定數量輸入的值？？？ 在我的情況下，點擊事件會觸發所有輸入並更改每個輸入的值。 請指導我謝謝。

Answer 1

這應該可以解決問題。

let plus_btns = document.querySelectorAll('#plus-button');
let minus_btns = document.querySelectorAll('#minus-button');
let qty_inputs = document.querySelectorAll('#quantity');

   plus_btns.forEach(btn=>{
       btn.addEventListener('click', ()=>{
           btn.previousElementSibling.value++;
       })
    })
    minus_btns.forEach(btn=>{
       btn.addEventListener('click', ()=>{
            btn.nextElementSibling.value = (btn.nextElementSibling.value == 0) ? 0 : btn.nextElementSibling.value - 1;
        })
    })

Answer 2

對單個通用文檔范圍的處理程序使用事件委托。 Afaik for不是輸入類型“按鈕”的有效屬性，因此請使用data-attribute 。 此外：元素id必須是唯一的。 修復了此演示片段中的所有問題：

 document.addEventListener("click", handle); function handle(evt) { if (evt.target.type === "button") { return handleBtn(evt.target); } } function handleBtn(btn) { const elem = document.querySelector(`#${btn.dataset.for}`); const nwValue = +elem.value + (btn.value === "-"? -1: 1); elem.value = nwValue >= +elem.min? nwValue: elem.min; }

 <div class="cart-totals"> <input type="button" value="-" data-for="quantity1"> <input type="number" id="quantity1" value="1" min="0"> <input type="button" value="+" data-for="quantity1"> <input type="button" value="-" data-for="quantity2"> <input type="number" id="quantity2" value="1" min="1"> <input type="button" value="+" data-for="quantity2"> </div>

Answer 3

使用單個事件處理程序：

 var cart = document.querySelector('.cart-totals'); cart.addEventListener('click', function(ev) { var tgt = ev.target; if (tgt.matches('input[type="button"]')) { var input = document.getElementById(tgt.dataset.for); var currentValue = +input.value; var minValue = +input.min; if (tgt.value === '+') { input.value = currentValue + 1; } else if (currentValue > minValue) { input.value = currentValue - 1; } } });

 <div class="cart-totals"> <input type="button" value="-" data-for="quantity1"> <input type="number" id="quantity1" value="1" min="0"> <input type="button" value="+" data-for="quantity1"> <input type="button" value="-" data-for="quantity2"> <input type="number" id="quantity2" value="5" min="2"> <input type="button" value="+" data-for="quantity2"> </div>