javascript - 使用数据属性计算输入字段

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 回调中，在 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>