jQuery sum使用相同类动态添加的输入字段(price * quantity)倍数

时间:2014-12-19 01:07:33

标签: jquery input sum each multiplication

我有一个.click函数,每次执行它会在页面中添加一组三个div。 第一个div是一个数字,乘以第二个包含货币值的div;结果显示在第三个div中。 我试图写一个.each函数来分别计算结果,但似乎我不能。我觉得应该很简单,但我错过了一些东西。有人可以帮忙吗?谢谢 这是我到目前为止编写的代码(我尝试了许多不同的方式......):

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

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

});

});

1 个答案:

答案 0 :(得分:2)

好的,这就是我在本网站JSFIDDLE IS HERE上找到googoling和搜索其他帖子的方式,希望可以帮助其他人:

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