使用数据属性计算输入字段答案

【问题标题】：Calculating input fields with data attribute使用数据属性计算输入字段
【发布时间】：2018-02-22 14:34:16
【问题描述】：

我有带有数据属性的输入字段。我希望在单击字段总计中的按钮时成为所有字段的总和。我找到了每个字段的总和，但是如何对所有字段求和。

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

【问题讨论】：

标签： javascript jquery html forms web

【解决方案1】：

 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>

试试这个，希望对你有帮助。

【讨论】：

【解决方案2】：

total的作用域只在每个回调内部，在each之前初始化为0，检查sn-p

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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

您可以使用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>

【讨论】：