在jquery中求和

markus-fenix 发表于 Dev

马库斯-菲尼克斯

我是该论坛的新手，希望能为您提供帮助和学习很多。

我有一个问题并试图解决，但我自己无法解决，可以帮帮我吗？

我有此代码：

jQuery：

$(document).ready(function() {
var max_fields      = 10; allowed
var moreprod         = $(".contenedor"); wrapper
var add_button      = $("#e");

var x = 1;
$(add_button).click(function(e){ 
    e.preventDefault();
    if(x < max_fields){
        x++; //text box increment
        $(moreprod).append('<div class="fieldprod"><div id="a"><input type="text" placeholder="Product"></input></div><div id="b" class="csymbol" data-symbol="$"><input id="prices" type="text" placeholder=" 0.00"></input></div><div id="c"><input id="prices" type="text" placeholder="qty"></input></div><div id="d" class="csymbol" data-symbol="$"><p id="qty">0.00</p></div><div id="f" class="removebtn">-</div></div>'); //add input box
    }
});


$(moreprod).on("click",".removebtn", function(e){ 
    e.preventDefault(); $(this).parent('div').remove(); x--;
})

});

HTML：

<div class="result">total</div>
<div class="contenedor">
<div class="fieldprod">
<div id="a">
<input type="text" placeholder="Product"></input>
</div>
<div id="b" class="csymbol" data-symbol="$">
<input id="prices" type="text" placeholder=" 0.00"></input>
</div>
<div id="c">
<input id="prices" type="text" placeholder="qty"></input>
</div>
<div id="d" class="csymbol" data-symbol="$"><p id="qty">0.00</p></div>
<div id="e">+</div>
</div>
</div>

并且我正在动态创建三个输入和两个div，它们一起构成一行，但是您可以创建更多的行，我正在尝试对一行中两个输入（c = a + b）的值求和。

但是，如果我添加新行，则求出值的总和（g = e + f），然后求和（总计= c + g）。

看到这张图片

有什么帮助吗？

在此先感谢您，我的英语不好：S

加布里埃莱·彼得里奥利（Gabriele Petrioli）

您正在复制id的文件在文档中应该是唯一的。更好地使用类。
您需要捕获元素的change事件input并在那里进行计算。

处理它的脚本

$(document).ready(function () {
    var max_fields = 10;
    var moreprod = $(".contenedor");
    var add_button = $("#e");
    var grandTotal = $('#grand-total');

    var x = 1;
    $(add_button).click(function (e) {
        e.preventDefault();
        if (x < max_fields) {
            x++; //text box increment
            $(moreprod).append('<div class="fieldprod"><div><input type="text" placeholder="Product"></input></div><div class="csymbol" data-symbol="$"><input class="price" type="text" placeholder=" 0.00"></input></div><div><input class="quantity" type="text" placeholder="qty"></input></div><div class="csymbol" data-symbol="$"><p class="product-total">0.00</p></div><div class="removebtn">-</div></div>'); //add input box
        }
    });


    moreprod.on("click", ".removebtn", function (e) {
        e.preventDefault();
        $(this).closest('.fieldprod').remove();
        x--;
        moreprod.find('.price').first().trigger('change');
    }).on('change', '.price, .quantity', function(){
        var group = $(this).closest('.fieldprod'),
            quantity = +group.find('.quantity').val(),
            price = +group.find('.price').val(),
            total = group.find('.product-total');

        total.text( (quantity*price).toFixed(2) );

        var grand = moreprod
                        .find('.product-total').get()
                        .reduce(function(p,v){
                            return p + +$(v).text();
                        },0);
        grandTotal.text(grand.toFixed(2));

    });

});