當我在具有相同名稱的輸入欄位中輸入值時，如何撰寫JavaScript并添加回圈以進行數學運算？-有解無憂

我想做的是簡單的數學運算，但是通過下面的代碼，我只能將其應用于一組輸入。但我希望它對所有輸入集都做同樣的事情。

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

uj5u.com熱心網友回復：

首先，您需要修復您的 id - id 應該是唯一的，因此請將它們更改為類。然后，在您的事件中，您需要獲取已鍵入的當前輸入。

從中您可以使用nextAll和的組合first來獲得與您所追求的班級最近的兄弟姐妹來進行計算并更新標簽

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

uj5u.com熱心網友回復：

這是另一個版本：

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

uj5u.com熱心網友回復：

ID 是單數的，因此您不能依賴 ID。您需要使用類或名稱來參考元素。

如果您將它們與包裝元素分組，您可以向該元素添加一個事件偵聽器，并輕松找到彼此相關的輸入。

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/452250.html

標籤：javascript html jQuery 形式

上一篇：如何在vform中顯示驗證訊息？

下一篇：為鍵的每個值添加元素-JSON