jQuery sum 多个输入字段（价格*数量）动态添加同一个类答案

【问题标题】：jQuery sum multiples input fields (price * quantity) dynamically added with same classjQuery sum 多个输入字段（价格*数量）动态添加同一个类
【发布时间】：2015-02-17 22:29:26
【问题描述】：

我有一个.click 函数，每次执行它都会在一个页面中添加一组三个 div。第一个 div 是一个数字，乘以第二个 div 持有货币值；结果显示在第三个 div 中。我正在尝试编写一个.each 函数来分别计算结果，但似乎我做不到。我觉得这应该很简单，但我错过了一些东西。有人可以帮忙吗？谢谢这是我到目前为止写的代码（我尝试了很多不同的方法......）：

===更新==== 我更新了我的代码，我添加了一个计数器，为类添加一个增量数字，但我仍然没有解决方案。现在的代码是

    <ul>
        <li>Quantità: <span><input type="text" name="Quantita" value="" class="currency2"></span> (metti due decimali - 0.00)</li>
        <li>Valore unitario: <span><input type="text" name="ValoreUnitario" value="" class="valore_unitario2"></span></li>
        <li>Valore totale: <span><input type="text" name="ValoreTotale" value="" class="somma2"></span></li>                        
    </ul>
    <ul>
        <li>Quantità: <span><input type="text" name="Quantita" value="" class="currency3"></span> (metti due decimali - 0.00)</li>
        <li>Valore unitario: <span><input type="text" name="ValoreUnitario" value="" class="valore_unitario3"></span></li>
        <li>Valore totale: <span><input type="text" name="ValoreTotale" value="" class="somma3"></span></li>                        
   </ul>
   <ul>
        <li>Quantità: <span><input type="text" name="Quantita" value="" class="currency4"></span> (metti due decimali - 0.00)</li>
        <li>Valore unitario: <span><input type="text" name="ValoreUnitario" value="" class="valore_unitario4"></span></li>
        <li>Valore totale: <span><input type="text" name="ValoreTotale" value="" class="somma4"></span></li>                        
   </ul>


    $(".currency"+ counter , ".valore_unitario" + counter).on("change keyup keydown paste propertychange bind mouseover", function(){
    var rate = parseFloat($(".currency" + counter ).val()) || 0;
    var box = parseFloat($(".valore_unitario" + counter).val()) || 0;

    $(".somma" + counter ).val(parseFloat(rate * box).toFixed(2));    

});

});

【问题讨论】：

标签： jquery input sum each multiplication

【解决方案1】：

好的，这就是我在本网站JSFIDDLE IS HERE 上的其他帖子上进行谷歌搜索和搜索的方法，希望可以帮助其他人：

<div class="page">
<ul>
    <li>Quantità: <span><input type="text" name="Quantita" value="" class="quantita"></span></li>
    <li>Valore unitario: <span><input type="text" name="ValoreUnitario" value="" class="valore"></span></li>
    <li> Valore totale: <span><input type="text" name="ValoreTotale" value="0.00" class="somma"></span></li>
</ul>

<div id="foo"></div>
<input type="submit" value="ADD MORE" class="button" id="clicca">
<ul>
    <li>Total amount:<input id="amount" type="text" name="Imponibile-Importo" value="0.00"></li>
</ul>
</div>

这里的脚本：

$(".page").on("change keyup keydown paste propertychange bind mouseover", function(){
    calculateSum();
});

// add fields
$( "#clicca" ).click(function() {
$( "#foo" ).append(
'<ul>' + '\n\r' +
'<li>Quantità: <span><input type="text" name="Quantita" value="" class="quantita"></span></li>' + '\n\r' +
'<li>Valore unitario: <span><input type="text" name="ValoreUnitario" value="" class="valore"></span></li>' + '\n\r' +
'<li>Valore totale: <span><input type="text" name="ValoreTotale" value="0.00" class="somma"></span></li>' + '\n\r' +
'</ul>' 
);

$(".somma").each(function() {
    $(this).keyup(function(){
        calculateSum();

    });
});

});

// function    
function calculateSum() {
var sum = 0;
$(".somma").each(function() {
if(!isNaN(this.value) && this.value.length!=0) {

    var quantita = $(this).closest("ul").find("input.quantita:text").val();
    var valore = $(this).closest("ul").find("input.valore:text").val();

    var subTot = (quantita * valore);

    $(this).val(subTot.toFixed(2));

    sum += parseFloat(subTot.toFixed(2));
   }
});
  $('#amount').val(sum.toFixed(2));
}

【讨论】：