javascript - 在 Jquery 中动态创建的输入值的乘法和求和

Question

我正在动态创建输入，其中我想在输入时将数字相乘，结果显示在另一个输入中，并且所有这些结果的总和显示在 id total 的输入中.

所以，这是我的代码:

<div class="inputs"></div>
<button type="button" id="new">NEW</button><br><br>
Total:<input id="total" type="text" readonly>
 <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
 <script>
  $("#new").click(function(){
   var cont = $(".numb").length;
   var index = cont + 1;
   var add = "<div><input class='numb' id='nn_"+index+"' onkeyup='calculate("+index+")'> X <input id='mm_"+index+"' onkeyup='calculate("+index+")'> = <input id='result_"+index+"' readonly></div>";
   $(".inputs").append(add);
  });
  
  function calculate(idx){
   $("#result_" + idx).val($("#nn_" + idx).val() * $("#mm_" + idx).val());
   $("#total").val(Number($("#total").val()) + Number($("#result_" + idx).val()));
  }
 </script>

问题是当我更改数字时，总和仍然像这样:

它必须是 10 而不是 14。如何修复它？

我需要一些帮助。

Answer 1

需要根据每个值计算总和，而不是每次新值都相加。

所以我做了什么:

• 我向每个结果输入添加了一个类“.sum”(以选择它们)

• 我创建了 2 个函数:一个用于计算行的结果 + 一个用于求和

• 我在 keyup 事件上添加了新功能

所以逻辑是，当您更改输入值时:

• 行更改的结果(与之前一样)
• 根据每个结果输入计算总和，从 0(新)开始

<div class="inputs"></div>
<button type="button" id="new">NEW</button><br><br>
Total:<input id="total" type="text" readonly>
 <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
 <script>
  $("#new").click(function(){
   var cont = $(".numb").length;
   var index = cont + 1;
   var add = "<div><input class='numb' id='nn_"+index+"' onkeyup='calculate("+index+"); total()'> X <input id='mm_"+index+"' onkeyup='calculate("+index+"); total()'> = <input class='sum' id='result_"+index+"' readonly></div>";
   $(".inputs").append(add);
  });
  
  function calculate(idx){
   $("#result_" + idx).val($("#nn_" + idx).val() * $("#mm_" + idx).val());
  }
  
  function total() {
  var sum = 0;
  
  $.each($(".sum"), function() {
    sum = sum + Number($(this).val());
  });
  
    $("#total").val(sum);
  }
 </script>

希望对你有帮助!