データ属性で入力フィールドを計算する

Question

データ属性を持つ入力フィールドがあります。フィールド合計のボタンをクリックすると、すべてのフィールドの合計が求められます。私はすべてのフィールドの合計を見つけましたが、すべてのフィールドを合計する方法。 totalの

<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

適用範囲は、各コールバック内で、0にそれをintializeだけeach前に、スニペットをチェック

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>

私はそれがあなたの役に立てば幸い、これを試してみてください。