如何只在被點擊的元素上觸發事件

Question

我正在嘗試創建自定義增量/減數輸入箭頭

我遇到的問題是如何找到一種方法只在被點擊的元素上觸發事件 - 目前它在所有輸入字段上觸發該功能

編輯**代碼已更新，因為我應該提到我正在循環遍歷項目並且每個輸入都有一個帶有類“.cart__qty-input”的包裝器div

 var quantityInput = document.querySelectorAll('.cart__qty-input'); var plusBtn = document.querySelectorAll('.inc_plus'); var minusBtn = document.querySelectorAll('.inc_minus'); for (i = 0; i < plusBtn.length; i++) { plusBtn[i].addEventListener('click', addQuantity) } function addQuantity(event) { const currentTarget = event.currentTarget; let activeIndex = null; // Find Index for (index = 0; index < plusBtn.length; index++) { if(plusBtn[index] === currentTarget) { activeIndex = index; } } var quantityValue = Number(quantityInput[activeIndex].value) var newQuantity = quantityValue + 1; quantityInput[activeIndex].value = newQuantity; } for (i = 0; i < minusBtn.length; i++) { minusBtn[i].addEventListener('click', minusQuantity) } function minusQuantity(event) { const currentTarget = event.currentTarget; let activeIndex = null; // Find Index for (index = 0; index < minusBtn.length; index++) { if(minusBtn[index] === currentTarget) { activeIndex = index; } } var quantityValue = Number(quantityInput[activeIndex].value) var newQuantity = quantityValue - 1 quantityInput[activeIndex].value = newQuantity }

 <div class="cart__qty-input"> <span class="inc_minus">-</span> <input id="test" class="cart__qty-input" type="number" name="updates[]" value="1" min="0" pattern="[0-9]*"> <span class="inc_plus">+</span> </div> <br> <div class="cart__qty-input"> <span class="inc_minus">-</span> <input id="test" class="cart__qty-input" type="number" name="updates[]" value="1" min="0" pattern="[0-9]*"> <span class="inc_plus">+</span> </div>

Answer 1

您當前的問題是您尚未實現 logc 來選擇單擊 +/- 按鈕的行。

我是通過以下方式做到的。

1. 選擇針對其單擊 +/- 按鈕的目標節點。
2. 解析 +/- 按鈕的數組以找到索引。
3. 找到索引后，僅更新與該索引對應的輸入。

希望這有幫助

 <div class="cart__qty-input"> <span class="inc_minus">-</span> <input id="test" class="cart__qty-input" type="number" name="updates[]" value="1" min="0" pattern="[0-9]*"> <span class="inc_plus">+</span> </div> <br> <div class="cart__qty-input"> <span class="inc_minus">-</span> <input id="test" class="cart__qty-input" type="number" name="updates[]" value="1" min="0" pattern="[0-9]*"> <span class="inc_plus">+</span> </div> <script> var quantityInput = document.querySelectorAll('.cart__qty-input input.cart__qty-input'); var plusBtn = document.querySelectorAll('.inc_plus'); var minusBtn = document.querySelectorAll('.inc_minus'); for (i = 0; i < plusBtn.length; i++) { plusBtn[i].addEventListener('click', addQuantity) } function addQuantity(event) { const currentTarget = event.currentTarget; let activeIndex = null; // Find Index for (index = 0; index < plusBtn.length; index++) { if (plusBtn[index] === currentTarget) { activeIndex = index; } } var quantityValue = Number(quantityInput[activeIndex].value) var newQuantity = quantityValue + 1; quantityInput[activeIndex].value = newQuantity; } for (i = 0; i < minusBtn.length; i++) { minusBtn[i].addEventListener('click', minusQuantity) } function minusQuantity(event) { const currentTarget = event.currentTarget; let activeIndex = null; // Find Index for (index = 0; index < minusBtn.length; index++) { if (minusBtn[index] === currentTarget) { activeIndex = index; } } var quantityValue = Number(quantityInput[activeIndex].value) var newQuantity = quantityValue - 1 quantityInput[activeIndex].value = newQuantity } </script>