使用數據屬性計算輸入字段

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之前intialize爲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

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); 
 
});

<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 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>

試試這個，我希望它可以幫助你。