防止在添加文本框值后添加它们

Question

我有几个文本框应该有数值。在每个文本框的模糊事件中，该特定文本框的值被添加并显示在另一个文本框中。因此，如果有人在第一个文本框中输入 10，则最后一个文本框应显示 10，如果在下一个文本框中输入 20，则该值应添加并在最后一个文本框中显示 30。

<input type="text" class="sum" /> 
<input type="text" class="sum" />
<input type="text" class="sum" />
<input type="text" class="sum" />
<input type="text" class="sum" />

<input type="text" id="total" />

使用 jquery 我执行以下操作，

$('.sum').blur(function(){
 $('#total').val(parseFloat($(this).val())+parseFloat($('#total').val()));
});

可以看出有一个问题，如果任何文本框再次聚焦，无论出于何种原因，相同的值再次出现在总计中。我如何确保文本框中的值一旦添加到总数中就不会再次添加。

Answer 1

每次触发模糊事件时，您都可以找到一个新的总和，

$('.sum').blur(function() {
  var sum = 0;
  $('.sum').each(function(){
     var val = $(this).val();
    if(!isNaN(val) && val != "") {
      sum+=parseFloat(val); 
    }
  });
  $('#total').val(sum);
});

存在数字检查，因为您的输入类型不是数字并且可以接受任何字母数字字符串和特殊字符。

$('.sum').blur(function() {
  var sum = 0;
  $('.sum').each(function() {
    var val = $(this).val();
    if (!isNaN(val) && val != "") {
      sum += parseFloat(val);
    }
  });
  $('#total').val(sum);
});

<input type="text" class="sum" />
<input type="text" class="sum" />
<input type="text" class="sum" />
<input type="text" class="sum" />
<input type="text" class="sum" />

<input type="text" id="total" value="0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

不是每次都添加新的，而是每次都更改sum所有这些：

$('.sum').blur(function() {
  var new_sum = 0;
  $('.sum').each(function(i, el) {
    if ($(el).val()) {
      new_sum += parseFloat($(el).val());
    }
  });
  $('#total').val(new_sum);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="sum" /> 
<input type="text" class="sum" />
<input type="text" class="sum" />
<input type="text" class="sum" />
<input type="text" class="sum" />

<input type="text" id="total" />