添加具有多个输入字段的两个输入框值在 jQuery 中不起作用

Question

我有一个网站，其中有一个表单，其中有一个如下所示的输入字段。如您所见，我正在尝试添加两个输入框以获取第三个输入框的值，但这仅适用于第一组输入框，其余输入框将出现故障或第一组的值。我该如何解决这个问题？

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

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

Answer 2

问题在于，当您在包含元素集合的 jQuery 对象上调用 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 将NaN 值强制为0。