当我在具有相同名称的输入字段中输入值时，如何编写 JavaScript 并添加循环以进行数学运算？

Question

我想做的是简单的数学运算，但使用下面的代码，我只能将其应用于一组输入。但我希望它对所有输入集都做同样的事情。

$('.num,.numm,.gen').keyup(function() {
  var closing = parseFloat($('.num').val());
  var total = parseFloat($('.numm').val());
  var gen = $('.gen').val();
  document.getElementById('sales').innerHTML = (total - closing);
  document.getElementById('saletotal').innerHTML = ((total - closing) * gen);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" data-id="55" class="num" name="close_val[]">
<input type="hidden" name="GeneralRate[]" id="GeneralRate" class="gen" value="70.00">
<input type="hidden" id="sales1177" name="total[]" class="numm" value="711">
<label id="sales">0</label>
<label id="saletotal">0</label>

<br>

<input type="text" data-id="55" class="num" name="close_val[]">
<input type="hidden" name="GeneralRate[]" id="GeneralRate" class="gen" value="70.00">
<input type="hidden" id="sales1177" name="total[]" class="numm" value="711">
<label id="sales">0</label>
<label id="saletotal">0</label>

<br>

<input type="text" data-id="55" class="num" name="close_val[]">
<input type="hidden" name="GeneralRate[]" id="GeneralRate" class="gen" value="70.00">
<input type="hidden" id="sales1177" name="total[]" class="numm" value="711">
<label id="sales">0</label>
<label id="saletotal">0</label>

Answer 1

首先您需要修复您的 ID - ID 应该是唯一的，因此请将它们更改为 classes。然后在您的活动中，您需要获取当前输入的 keyupped。

从那里你可以使用 nextAll 和 first 的组合来获得最近的兄弟与 class 你之后进行计算并更新标签

$('.num').keyup(function() {
  var $input = $(this); // get the input that has been key upped
  var closing = parseFloat($input.val());
  var total = parseFloat($input.nextAll('.numm').first().val());
  var gen = parseFloat($input.nextAll('.gen').first().val());
  var sales = total - closing;
  $input.nextAll('.sales').first().html(sales);
  $input.nextAll('.saletotal').first().html(sales  * gen);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" data-id="55" class="num" name="close_val[]">
<input type="hidden" name="GeneralRate[]" id="GeneralRate" class="gen" value="70.00">
<input type="hidden" id="sales1177" name="total[]" class="numm" value="711">
<label class="sales">0</label>
<label class="saletotal">0</label>

<br>

<input type="text" data-id="55" class="num" name="close_val[]">
<input type="hidden" name="GeneralRate[]" id="GeneralRate" class="gen" value="70.00">
<input type="hidden" id="sales1177" name="total[]" class="numm" value="711">
<label class="sales">0</label>
<label class="saletotal">0</label>

<br>

<input type="text" data-id="55" class="num" name="close_val[]">
<input type="hidden" name="GeneralRate[]" id="GeneralRate" class="gen" value="70.00">
<input type="hidden" id="sales1177" name="total[]" class="numm" value="711">
<label class="sales">0</label>
<label class="saletotal">0</label>

如果您可以更改 html，我会将每个集合都包装在它自己的 div 中，然后您可以使 jquery 更整洁一些：

$('.num').keyup(function() {
  var $input = $(this); // get the input that has been key upped
  var $parent = $input.parent();
    var closing = parseFloat($input.val());
  var total = parseFloat($parent.find('.numm').val());
  var gen = parseFloat($parent.find('.gen').val());
  var sales = total - closing;
  $parent.find('.sales').html(sales);
  $parent.find('.saletotal').html(sales * gen);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input type="text" data-id="55" class="num" name="close_val[]">
  <input type="hidden" name="GeneralRate[]" id="GeneralRate" class="gen" value="70.00">
  <input type="hidden" id="sales1177" name="total[]" class="numm" value="711">
  <label class="sales">0</label>
  <label class="saletotal">0</label>
</div>
<div>
  <input type="text" data-id="55" class="num" name="close_val[]">
  <input type="hidden" name="GeneralRate[]" id="GeneralRate" class="gen" value="70.00">
  <input type="hidden" id="sales1177" name="total[]" class="numm" value="711">
  <label class="sales">0</label>
  <label class="saletotal">0</label>
</div>
<div>
  <input type="text" data-id="55" class="num" name="close_val[]">
  <input type="hidden" name="GeneralRate[]" id="GeneralRate" class="gen" value="70.00">
  <input type="hidden" id="sales1177" name="total[]" class="numm" value="711">
  <label class="sales">0</label>
  <label class="saletotal">0</label>
</div>

Answer 2

这是另一个版本：

$('.num').each(function(i,el) {
   const gen = +$("~ .gen", this).val();
   const numm = +$("~ .numm", this).val();
   $(this).on("input", ev => {
    let sales = numm - this.value;
    $("~ .sales:first", this).text(sales);
    $("~ .saletotal:first", this).text(sales*gen);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" data-id="55" class="num" name="close_val[]">
<input type="hidden" name="GeneralRate[]" id="GeneralRate" class="gen" value="30.00">
<input type="hidden" id="sales1177" name="total[]" class="numm" value="100">
<label class="sales">0</label>
<label class="saletotal">0</label>

<br>

<input type="text" data-id="55" class="num" name="close_val[]">
<input type="hidden" name="GeneralRate[]" id="GeneralRate" class="gen" value="50.00">
<input type="hidden" id="sales1177" name="total[]" class="numm" value="400">
<label class="sales">0</label>
<label class="saletotal">0</label>

<br>

<input type="text" data-id="55" class="num" name="close_val[]">
<input type="hidden" name="GeneralRate[]" id="GeneralRate" class="gen" value="70.00">
<input type="hidden" id="sales1177" name="total[]" class="numm" value="711">
<label class="sales">0</label>
<label class="saletotal">0</label>

Answer 3

ID 是单数的，因此您不能依赖 ID。您需要使用 class 或名称来引用元素。

如果您将它们与包装器元素组合在一起，您就可以向该元素添加一个事件侦听器并轻松找到彼此相关的输入。

$("fieldset").on("input", function () {
  const fs = $(this);
  const num = +fs.find(".num").val();
  const gen = +fs.find(".gen").val();
  const numm = +fs.find(".numm").val();
  fs.find(".sales").text('x' + num);
  fs.find(".saletotal").text(num + ', ' + gen + ', '+ numm);
});

fieldset {
  border: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset>
  <input type="text" data-id="55" class="num" name="close_val[]">
  <input type="hidden" name="GeneralRate[]" class="gen" value="70.00">
  <input type="hidden" name="total[]" class="numm" value="711">
  <label class="sales">0</label>
  <label class="saletotal">0</label>
</fieldset>

<fieldset>
  <input type="text" data-id="55" class="num" name="close_val[]">
  <input type="hidden" name="GeneralRate[]" class="gen" value="70.00">
  <input type="hidden" name="total[]" class="numm" value="711">
  <label class="sales">0</label>
  <label class="saletotal">0</label>
</fieldset>

<fieldset>
  <input type="text" data-id="55" class="num" name="close_val[]">
  <input type="hidden" name="GeneralRate[]" class="gen" value="70.00">
  <input type="hidden" name="total[]" class="numm" value="711">
  <label class="sales">0</label>
  <label class="saletotal">0</label>
</fieldset>

当我在具有相同名称的输入字段中输入值时，如何编写 JavaScript 并添加循环以进行数学运算？

how to write JavaScript and add loop for following to do math operations when i enter value in input fields with same names?

html

javascript

forms

jquery