在jquery中求和

我是这个论坛的新手，希望能和你们一起帮助和学习

我有一个问题，试图解决它，但我不能解决它自己，可以给我一个帮助吗

我有以下代码：

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--;
})

});

$（文档）.ready（函数（）{
var max_字段=10；允许
var moreprod=$（“.contendor”）；包装器
var add_按钮=$（“#e”）；
var x=1；
$（添加按钮）。单击（函数（e）{
e、 预防默认值（）；
如果（x0.00
-'）；//添加输入框
}
});
$（moreprod）.on（“click”，“.removebtn”，函数（e）{
e、 preventDefault（）；$（this）.parent（'div'）.remove（）；x--；
})
});

HTML:

总计
0.00
+

我动态地创建了三个输入和两个div，它们一起形成一行，但是您可以创建更多的行，我尝试将一行中两个输入（c=a+b）的值求和

但是，如果我添加一个新行，那么求出这些值的和（g=e+f），然后求这个和（total=c+g）

有什么帮助吗

---

提前感谢并为我糟糕的英语感到抱歉：S

您想动态添加和删除商品行（在商店软件中）

但是，您正在重用相同的id值，这是不好的。 ID必须是全局唯一的

有许多选项可以实现您的目标：

使所有id唯一，使用x1、x2、x3

删除所有ID，仅使用CSS选择器获取字段

另一个问题是删除按钮。我不敢相信它能起作用。 我将在添加行之后注册remove处理程序。 目前只注册了一个remove处理程序，所以应该删除的只有第一行

您正在复制的

id

在文档中应该是唯一的。更好地使用类

您需要捕获

input

元素的

change

事件，并在那里进行计算

处理它的脚本

$(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));

    });

});

$（文档）.ready（函数（）{
var max_字段=10；
var moreprod=$（“.contendor”）；
var add_按钮=$（“#e”）；
var grandTotal=$（“#总计”）；
var x=1；
$（添加按钮）。单击（功能（e）{
e、 预防默认值（）；
如果（x0.00
-'）；//添加输入框
}
});
moreprod.on（“单击“，”.removebtn“，函数（e）{
e、 预防默认值（）；
$（this）.closest（'.fieldprod'）.remove（）；
x--；
moreprod.find（'.price'）.first（）.trigger（'change'）；
}).on（'change'，'price，.quantity'，function（）{
变量组=$（this）.closest（'.fieldprod'），
数量=+组.find（'.quantity'）.val（），
price=+group.find（'.price'）.val（），
总计=组。查找（“.产品总计”）；
总计.文本（（数量*价格）.toFixed（2））；
var grand=moreprod
.find（'.product total'）.get（）
.减少（功能（p，v）{
返回p++$（v）.text（）；
},0);
grandTotal.text（grand.toFixed（2））；
});
});

---

演示在

r你得到任何错误或什么吗？没有任何错误，观看它：嗨Ix42.de因为我是新的，我不能包括到jsFiddle的链接：所有（在我眼里）工作得很好谢谢！！！工作完美，现在我可以看到我所有的错误，我还不能投票给你的答案，但非常感谢你！！！嗨，petrioli先生，我希望你很好，我在玩你的代码，我有一个问题，有没有办法将输入值保存在本地存储文件中，并可以选择以后加载它们？没有办法加载到本地文件中（因为浏览器javascript无法访问文件i/o操作）。如果您指的是浏览器提供的本地存储，则是。看见

$(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));

    });

});