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

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

$(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">

uj5u.com熱心網友回復：

包裝在容器中并從您更新的元素的父 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>

uj5u.com熱心網友回復：

問題在于，當您val()在包含元素集合的 jQuery 物件上呼叫其他 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">

請注意在上面的示例中使用了inputoverkeypress以便當用戶使用滑鼠向滑鼠添加內容時該邏輯也可以作業input。另請注意使用將值|| 0強制NaN為 a 0。

標籤：

上一篇：表單選擇不發送資料

下一篇：拖放后Html畫布元素將寬度和高度重置為零