代码之家 › 专栏 › 技术社区 › NekoLopez

在jquery中动态创建的乘法和求和输入值

jquery javascript

NekoLopez · 技术社区 · 8 年前

我动态地创建输入,在输入时我想用它来乘以数字,结果显示在另一个输入中,所有这些结果的总和显示在一个ID为的输入中。 全部的 .

所以,这是我的代码:

<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号。如何修复?

我想要些帮助。

3 回复 | 直到 8 年前

Mickaël Leger 8 年前

您需要根据每个值计算总和,而不是每次添加新值。

所以我所做的:

我在每个结果输入中添加了一个类“.sum”(选择它们)
我做了两个函数:一个用于计算行的结果,另一个用于求和
我在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>

希望有帮助!

Rory McCrossan Hsm Sharique Hasan 8 年前

问题的一部分是,在每个变更事件中,您都在累积地增加总数。相反,您需要完全根据新值重新计算总数。

还可以使用DOM遍历将元素相互关联,而不是增量关联,从而使HTML更清晰。 id 属性以及在过时的 on* 事件属性,应尽可能避免。试试这个:

$("#new").click(function() {
  $(".inputs").append('<div><input class="number"> X <input class="multi" /> = <input class="line-total" readonly /></div>');
});

$('.inputs').on('input', '.number, .multi', function() {
  var $container = $(this).closest('div');
  var number = $container.find('.number').val() || 0;
  var multi = $container.find('.multi').val() || 0;
  $container.find('.line-total').val(number * multi);
  updateTotal();
});

function updateTotal() {
  var total = 0;
  $('.line-total').each(function() {
    total += parseInt($(this).val(), 10);
  });
  $('#total').val(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>

Juan 8 年前

更新单元格时 calculate(idx) 正在重新计算此行,但对于未重新计算的汇总,它正在将新行的汇总添加到Alrady添加旧值的以前计算的汇总中。

要更正它,您需要将总计重置为0,并循环所有行以重新添加所有行总计。