我有一个网站，其中有一个表单，其中有一个如下所示的输入栏位。如您所见，我正在尝试添加两个输入框以获取第三个输入框的值，但这仅适用于第一组输入框，其余的输入框出现故障或第一组的值。谁能告诉我如何解决这个问题，在此先感谢。

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