Question

我是论坛的新手，希望能帮到你，并为你学到很多东西。

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

我有这段代码：

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）。

see this picture

任何帮助？

提前感谢，抱歉我的英语不好：S

Answer 1

您正在复制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));

    });

});

http://jsfiddle.net/gaby/9tp5aycy/

Answer 2

您希望使用产品动态添加和删除行（在商店软件中）。

但是，你正在重用SAME id值，这很糟糕。 Ids必须是全球唯一的。

有很多选择可以实现你的目标：

使所有ID都唯一，使用x1，x2，x3 ...
删除所有ID，仅使用CSS选择器获取字段http://api.jquery.com/category/selectors/
...

另一个问题是删除按钮。我无法相信它有效。我会在追加行之后注册删除处理程序。目前只有一个删除处理程序已注册，因此唯一应删除的是第一行。

在jquery中总结

2 个答案: