Question

我有输入数据属性的字段。我希望点击字段总数中的按钮是所有字段总数的总和。我找到了每个字段的总和，但是如何将它们全部加起来。

<input type="text" id="total">
<div class="field">
  <input type="number" min="1" max="255" data-price="2" class="wert">
</div>
<div class="field">
  <input type="number" min="1" max="255" data-price="2" class="wert">
</div>
<button id="calc-butt">Sum</button>
<script>
 jQuery('#calc-butt').click(function() {
    jQuery('.field').each(function(){
      var price = jQuery(this).find('.wert').attr("data-price");
      var cubic = jQuery(this).find('.wert').val();
      var total = price * cubic;

    });
 });
</script>

Answer 1

total的范围仅在每个回调中，在each之前将其初始化为0，请检查代码段

jQuery('#calc-butt').click(function() {
    var total = 0;
    jQuery('.field').each(function(){
      var price = jQuery(this).find('.wert').attr("data-price");
      var cubic = jQuery(this).find('.wert').val();
      total += price * cubic;
      jQuery('#total').val(total);
    });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="total">
<div class="field">
  <input type="number" min="1" max="255" data-price="2" class="wert">
</div>
<div class="field">
  <input type="number" min="1" max="255" data-price="2" class="wert">
</div>
<button id="calc-butt">Sum</button>

Answer 2

您可以使用map将每个字段的计算值放入数组中，并减少该数组以获得总数

 jQuery('#calc-butt').on('click', function() {
    var values = jQuery('.field').map(function(){
      var price = jQuery(this).find('.wert').attr("data-price");
      var cubic = jQuery(this).find('.wert').val();
      return price * cubic;
    }).get();
    
    var total = values.reduce(function(a,b) { return a + b });
    
    $('#total').val(total);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="total">
<div class="field">
  <input type="number" min="1" max="255" data-price="2" class="wert">
</div>
<div class="field">
  <input type="number" min="1" max="255" data-price="2" class="wert">
</div>
<button id="calc-butt">Sum</button>

Answer 3

＆＃13;

jQuery('#calc-butt').click(function() {
    var sum = 0;
    var total = 0;
    jQuery('.wert').each(function(){
      var price = $(this).attr("data-price");
      var cubic = $(this).val();
      total += price * cubic;
      sum += Number(cubic);
    });
    
    alert('sum = ' + sum + ' total = ' + total);
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="total">
<div class="field">
  <input type="number" min="1" max="255" data-price="2" class="wert">
</div>
<div class="field">
  <input type="number" min="1" max="255" data-price="2" class="wert">
</div>
<button id="calc-butt">Sum</button>

＆＃13;

Answer 4

 var totalInput = $('#total');
 
 $('#calc-butt').click(function() {
    var globalTotal = 0;
    $('.field').each(function(){
      var input = $(this).find('.wert');
      
      var price = input.attr("data-price");
      var cubic = input.val();
           
      var total = price * cubic;
      globalTotal += total;
    });
    totalInput.val(globalTotal);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="total">
<div class="field">
  <input type="number" min="1" max="255" data-price="2" class="wert">
</div>
<div class="field">
  <input type="number" min="1" max="255" data-price="3" class="wert">
</div>
<button id="calc-butt">Sum</button>

试试这个，我希望它可以帮到你。

使用data属性计算输入字段

4 个答案: