Question

我正在尝试使用jquery迭代所有'.invoice-lines'并通过总结'.amount-input'div中的所有值来生成总计。

AJAX在'.amount-input'中动态生成默认值，可以由用户手动更改。我一直在尝试创建一个函数，以便每次使用AJAX进入新数据时，都会调用函数updateTotal（），它会迭代所有非空的'amount-input'值并重新计算总数。我一直在努力实现这一目标，我非常感谢任何帮助。

JQuery - 到目前为止这是我的jquery（伪代码）

function updateTotal(){
   var total=0;
    for(i=0; i < $('.invoice-line').length; i++){
         if($('.amount-input').eq(i).val() != empty)){
              total += $('.amount-input').eq(i).val();
          }
    }
    $('.total').val("$" + total);
}

标记

<?
    for(i=0; i < 25; i++){
    echo'   <div class="invoice-line">
                <div class="prod-id-cell"><input type="text" class="prod-id-input"></div>

                <div class="amount-cell"><input class="amount-input" type="text" /></div>
            </div>';
    }
?>
    <div class="total">$0.00</div>

Answer 1

确保缓存jQuery选择，否则您正在执行50个DOM遍历而不是1：

var total=0, amounts = $('.amount-input'), len = amounts.length;
for(var i=0; i < len; i++){
     total += +amounts[i].value;
}

使用一元加运算符将单元格值从字符串转换为数字。 +""会给你零，所以你不需要检查单元格是否为空，尽管你可能想在验证输入时检查isNaN。

另外，对input元素使用val，对text或div使用span。

$('.total').text("$" + total);

Answer 2

纯JS的基本语法如下：

var inputs = document.getElementsByClassName("amount-input");
var total = 0;
inputs.forEach(function (input) {
    total += value;
});

您的想法是获得您感兴趣的所有输入的集合，然后使用外部变量汇总值。如果要将其展开以包含其他输入，则可以使用document.querySelectorAll("")和CSS查询选择器来获取集合。（这与jQuery $（“”）选择语法相同。）

Answer 3

这样的事情应该有效：

function updateTotal() {
    var total = 0;
    $('.invoice-line').each(function (i, elem) {
        total += parseFloat($(elem).find('.amount-input').val(), 10) || 0;
    });
    $('.total').val("$" + total);
}

Answer 4

每次单独更新输入元素时，您都可以使用更改事件来更新总金额。以下是一个简单的例子：

HTML：

<input class="invoice" type="text" value="0" />
<input class="invoice" type="text" value="0" />
<input class="invoice" type="text" value="0" />
<div id="total">0</div>

使用Javascript：

$('.invoice').change(function() {
    var total = 0;
    $('.invoice').each(function() {
        total += parseFloat($(this).val());
    });
    $('#total').text(total);
});

您可以在this jsfiddle中看到它。

Answer 5

发布后不久，我就可以按照以下方式提出自己的解决方案：

function updateTotal(){
    var total=0;
    for(i=0; i < $('.invoice-line').size(); i++){
        currentAmount = Number($('.amount-input').eq(i).val().replace(/[^0-9\.]+/g,""));
        total += currentAmount;
    }
    $('.total-number').text("$" + total.toFixed(2));
}

总结输入值

5 个答案: