如何獲取相鄰元素的值並使用 Javascript 或 Jquery 更改它

Question

我在選擇相鄰元素並更新其值時遇到問題，我想通過單擊 -,+ 按鈕來更新輸入值。 我能夠獲取所有按鈕並循環通過向每個按鈕添加 onclick 事件偵聽器的按鈕，我在選擇（.amount 值輸入）和更新其值時遇到問題

 function decreaseAmount(step){ const buttons=document.querySelectorAll(".input-amount button"); buttons.forEach(function(button){ button.addEventListener("click", function(event) { console.log(event.currentTarget.parentElement); }); }); } function increaseAmount(step){ const buttons=document.querySelectorAll(".input-amount button"); buttons.forEach(function(button){ button.addEventListener("click", function(event) { console.log(event.currentTarget.parentElement); }); }); }

 <div class="row break-none input-amount"> <div class="col align-right"> <button class="app-action secondary" type="button" role="button" onclick="decreaseAmount(10)"> <span>−</span> </button> </div> <div class="col amount-value"> <input id="amountvalue2135" type="number" value="1000" step="10" class="form-control"> </div> <div class="col"> <button class="app-action secondary" type="button" role="button" onclick="increaseAmount(10)"> <span>+</span> </button> <div class="row break-none input-amount"> <div class="col align-right"> <button class="app-action secondary" type="button" role="button" onclick="decreaseAmount(10)"> <span>−</span> </button> </div> <div class="col amount-value"> <input id="amountvalue2135" type="number" value="1000" step="10" class="form-control"> </div> <div class="col"> <button class="app-action secondary" type="button" role="button" onclick="increaseAmount(10)"> <span>+</span> </button> </div> </div> </div> </div>

Answer 1

對於初學者來說，javascripting 擁有良好的 HTML 結構很重要。 您在 col 內有一排。我不確定這是否是故意的，但是當您調整答案中的代碼時，請告訴我它是否不符合您的結構。

無論如何，我設置的方法是將事件偵聽器放在所有帶有屬性data-increment的按鈕上，這是我添加的內容。 你會看到 +10/-10 在那里。 然后當你點擊一個按鈕時，它知道如何獲得它自己的增量。 按鈕 eventListener 始終只有一個參數event （但您可以隨意調用它，我選擇了e ）。 為了找到相對於按鈕的輸入元素，我使用了.closest() 。 例如這一行：

let input = target.closest('.row').querySelector('input[type=number]')

這一行表示input = the input type='number'元素，該元素位於與我最接近的父類row的元素中

您會在變量之前看到許多+ 。 這是告訴 javascript 將該變量視為數字的簡寫（因為任何 html 輸入元素的值始終是字符串）

 document.querySelectorAll('button[data-increment]').forEach(btn => { btn.addEventListener('click', function(e) { let target = e.target; if (e.target.tagName.toLowerCase() !== "button") target = e.target.closest('button'); let inc = target.dataset.increment; let input = target.closest('.row').querySelector('input[type=number]') input.value = +input.value + +inc; }) })

 .col { display: inline-block; } .row { display: block; margin-bottom: 10px; }

 <div class="row break-none input-amount"> <div class="col align-right"> <button class="app-action secondary" type="button" role="button" data-increment="-10">−</button> </div> <div class="col amount-value"> <input id="amountvalue2135" type="number" value="1000" step="10" class="form-control"> </div> <div class="col"> <button class="app-action secondary" type="button" role="button" data-increment="10">+</button> </div> </div> <div class="row break-none input-amount"> <div class="col align-right"> <button class="app-action secondary" type="button" role="button" data-increment="-10"> − </button> </div> <div class="col amount-value"> <input id="amountvalue2135" type="number" value="1000" step="10" class="form-control"> </div> <div class="col"> <button class="app-action secondary" type="button" role="button" data-increment="10">+</button> </div> </div>

Answer 2

如果你被允許使用 JQuery，這是簡化版

 $(function() { $(".minus").on('click', function() { let inputField = $(this).parent().find('input'); let stepAmt = Number($(inputField).attr('step')); let currValue = Number($(inputField).val()); $(inputField).val(currValue - stepAmt); }); $(".plus").on('click', function() { let inputField = $(this).parent().find('input'); let stepAmt = Number($(inputField).attr('step')); let currValue = Number($(inputField).val()); $(inputField).val(currValue + stepAmt); }); });

 button { display: inline-block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row break-none input-amount"> <button class="app-action secondary minus" type="button" role="button"> - </button> <input id="amount1" type="number" value="1000" step="10" class="form-control"> <button class="app-action secondary plus" type="button" role="button"> + </button> </div> <div class="row break-none input-amount"> <button class="app-action secondary minus" type="button" role="button"> - </button> <input id="amount2" type="number" value="1000" step="10" class="form-control"> <button class="app-action secondary plus" type="button" role="button"> + </button> </div>