添加具有多個輸入字段的兩個輸入框值在 jquery 中不起作用

Question

我有一個網站，其中有一個表單，其中有一個如下所示的輸入字段。 如您所見，我正在嘗試添加兩個輸入框以獲取第三個輸入框的值，但這僅適用於第一組輸入框，因為 rest 出現故障或第一組的值。 誰能告訴我如何解決這個問題，在此先感謝。

 $(document).ready(function() { $(".value2").keyup(function() { var val1 = +$(".value1").val(); var val2 = +$(".value2").val(); $(".result").val(val1 * val2); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <input name="quantity[]" type="text" class="form-control value1"> <input name="rate[]" type="text" class="form-control value2"> <input name="amount[]" type="text" class="form-control result"> <input name="quantity[]" type="text" class="form-control value1"> <input name="rate[]" type="text" class="form-control value2"> <input name="amount[]" type="text" class="form-control result"> <input name="quantity[]" type="text" class="form-control value1"> <input name="rate[]" type="text" class="form-control value2"> <input name="amount[]" type="text" class="form-control result">

Answer 1

問題是因為當您在 jQuery object 上調用val()以及其他 jQuery 方法時，它只針對該集合中的第一個元素進行評估。

要解決您的問題，您可以使用 jQuery 的 DOM 遍歷方法將 DOM 中的相關元素檢索到引發事件的元素。 在這種情況下， prev()和next() ：

 jQuery($ => { $(".value2").on('input', e => { let $val2 = $(e.target); let val1 = +$val2.prev(".value1").val() || 0; let val2 = +$val2.val() || 0; $val2.next(".result").val(val1 * val2); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <input name="quantity[]" type="text" class="form-control value1"> <input name="rate[]" type="text" class="form-control value2"> <input name="amount[]" type="text" class="form-control result"> <input name="quantity[]" type="text" class="form-control value1"> <input name="rate[]" type="text" class="form-control value2"> <input name="amount[]" type="text" class="form-control result"> <input name="quantity[]" type="text" class="form-control value1"> <input name="rate[]" type="text" class="form-control value2"> <input name="amount[]" type="text" class="form-control result">

請注意在上面的示例中使用input而不是keypress ，因此當用戶使用鼠標將內容添加到input時，該邏輯也可以工作。 還要注意|| 0的使用。 || 0將NaN值強制為0 。

Answer 2

包裝在容器中並從您更新的元素的父 div 委托

這里的數據是相對於你更新的字段

注意：添加一個帶有 ID 的主容器，並將每個集合包裝在 div 中

 $(document).ready(function() { $("#container").on("input",".form-control", function() { const $parent = $(this).closest("div.item") var val1 = +$(".value1", $parent).val(); var val2 = +$(".value2", $parent).val(); $(".result", $parent).val(val1 * val2); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div id="container"> <div class="item"> <input name="quantity[]" type="text" class="form-control value1"> <input name="rate[]" type="text" class="form-control value2"> <input name="amount[]" type="text" class="form-control result"> </div> <div class="item"> <input name="quantity[]" type="text" class="form-control value1"> <input name="rate[]" type="text" class="form-control value2"> <input name="amount[]" type="text" class="form-control result"> </div> <div class="item"> <input name="quantity[]" type="text" class="form-control value1"> <input name="rate[]" type="text" class="form-control value2"> <input name="amount[]" type="text" class="form-control result"> </div> </div>