Question

我有三个行输入字段，喜欢将每行的所有输入和最终所有小计汇总到最终价格。

到目前为止，我可以计算，但总是得到所有值的总和。怎么会失败？

我的剧本：

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

    <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

我不确定我是否能得到你想要的东西，但你应该这样试试：给每个div一个单独的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);
});

jquery sum和每行小计和总和

1 个答案: