jquery總和和小計每行和總和

Question

我有三個行輸入字段，並希望summ所有輸入的每一行，最後所有的小計一起到最後的價格。

到目前爲止，我可以計算，但總是隻獲得所有值的總和。 這怎麼可能下降？

我的腳本：

if ($('body.shop').length) { 

    $('#orderform').change(function(e){ 
     var sum = 0; 
     $(this).find('input[type=number]').each(function(index,el){ 
      var val = $(el).val() * $(el).attr('data-price'); 
      if(val && val != "") 
       sum += parseFloat(val); 
      }); 
     $('.flex-item.summe input').val(sum); 



     $('#total').val(sum).toFixed(2); 


    }); 
} 

和HTML部分：

<div id="orderform" class="row"> 
<div class="col-md-12"> 
<div class="order flex-wrap"> 
    <div class="liter flex-item ch ordername">Name</div> 
    <div class="liter flex-item ch">20 Liter</div> 
    <div class="liter flex-item ch">30 Liter</div> 
    <div class="liter flex-item ch">60 Liter</div> 
    <div class="liter flex-item ch">200 Liter</div> 
    <div class="liter flex-item ch">1.000 Liter</div> 
    <div class="liter flex-item ch">Summe</div></div> 

    <div class="item flex-wrap"> 
     <div class="flex-item"><h4>Product 1</h4></div> 
     <div class="flex-item price"><input type="number" id="20_1" min="0" max="30" value="0" data-price="149.00"></div> 
     <div class="flex-item price"><input type="number" id="30_1" min="0" max="30" value="0" data-price="199.00"></div> 
     <div class="flex-item price"><input type="number" id="60_1" min="0" max="30" value="0" data-price="299.00"></div> 
     <div class="flex-item price"><input type="number" id="200_1" min="0" max="30" value="0" data-price="699.00"></div> 
     <div class="flex-item price"><input type="number" id="1000_1" min="0" max="30" value="0" data-price="2200.00"></div> 
     <div class="flex-item summe"><input type="text" readonly="" value="0" data-summe="" id="summe_1"></div> 
    </div> 
    <div class="item flex-wrap"> 
     <div class="flex-item"><h4>Product 2</h4></div> 
     <div class="flex-item price"><input type="number" id="20_2" min="0" max="30" value="0" data-price="49.00"></div> 
     <div class="flex-item price"><input type="number" id="30_2" min="0" max="30" value="0" data-price="89.00"></div> 
     <div class="flex-item price"><input type="number" id="60_2" min="0" max="30" value="0" data-price="129.00"></div> 
     <div class="flex-item price"><input type="number" id="200_2" min="0" max="30" value="0" data-price="229.00"></div> 
     <div class="flex-item price"><input type="number" id="1000_2" min="0" max="30" value="0" data-price="699.00"></div> 
     <div class="flex-item summe"><input type="text" readonly="" value="0" data-summe="" id="summe_2"></div> 
    </div> 
    <div class="item flex-wrap"> 
     <div class="flex-item"><h4>Product 3</h4></div> 
     <div class="flex-item price"><input type="number" id="20_3" min="0" max="30" value="0" data-price="49.00"></div> 
     <div class="flex-item price"><input type="number" id="30_3" min="0" max="30" value="0" data-price="89.00"></div> 
     <div class="flex-item price"><input type="number" id="60_3" min="0" max="30" value="0" data-price="129.00"></div> 
     <div class="flex-item price"><input type="number" id="200_3" min="0" max="30" value="0" data-price="229.00"></div> 
     <div class="flex-item price"><input type="number" id="1000_3" min="0" max="30" value="0" data-price="699.00"></div> 
     <div class="flex-item summe"><input type="text" readonly="" value="0" data-summe="" id="summe_3"></div> 
    </div>  

    <div class="totalSum"><input type="text" readonly="" value="0" data-total="" id="total" class="total"></div> 
</div> 
</div> 

Answer 1

我不知道如果我得到你想要什麼正確的，但你應該試試這種方法： 給每格一個分開的ID：

<div class="item flex-wrap" id="product_1"> 
    <div class="flex-item"><h4>Product 1</h4></div> 
... 
<div class="item flex-wrap" id="product_2"> 
    <div class="flex-item"><h4>Product 2</h4></div> 
... 
<div class="item flex-wrap" id="product_3"> 
    <div class="flex-item"><h4>Product 3</h4></div> 

然後簡單地每個分開：

$('#orderform').change(function(e){ 
     var sum = 0; 
     var subsum1 = 0; 
     var subsum2 = 0; 
     var subsum3 = 0; 

     $("#product_1").find('input[type=number]').each(function(index,el){ 
      var val = $(el).val() * $(el).attr('data-price'); 
      if(val && val != "") { 
       subsum1 += parseFloat(val); 
       sum += parseFloat(val); 
      } 
     }); 
     $("#product_2").find('input[type=number]').each(function(index,el){ 
      var val = $(el).val() * $(el).attr('data-price'); 
      if(val && val != "") { 
       subsum2 += parseFloat(val); 
       sum += parseFloat(val); 
      } 
     }); 
     $("#product_3").find('input[type=number]').each(function(index,el){ 
      var val = $(el).val() * $(el).attr('data-price'); 
      if(val && val != "") { 
       subsum3 += parseFloat(val); 
       sum += parseFloat(val); 
      } 
     }); 


     $("#summe_1").val(subsum1); 
     $("#summe_2").val(subsum2); 
     $("#summe_3").val(subsum3); 

     $('#total').val(sum).toFixed(2); 
});