0

我正在尝试使用 jquery 遍历所有 '.invoice-lines' 并通过汇总 '.amount-input' div 中的所有值来生成总数。

AJAX 在 '.amount-input' 中动态生成默认值，用户可以手动更改。我一直在尝试创建一个函数，以便每次使用 AJAX 传入新数据时，都会调用函数 updateTotal()，它遍历所有非空的“金额输入”值并重新计算总数。我一直很难做到这一点，我将非常感谢任何帮助。

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>
4

5 回答 5

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对divs 或spans 使用。

$('.total').text("$" + total);
于 2012-12-09T16:25:51.883 回答
0

纯 JS 中的基本语法如下：

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

这个想法是您获得所有您感兴趣的输入的集合，然后使用外部变量对这些值求和。如果您想扩展它以包含其他输入，那么您可以使用document.querySelectorAll("")CSS 查询选择器来获取集合。（这与 jQuery $("") 选择语法相同。）

于 2012-12-09T16:24:50.470 回答
0

像这样的东西应该工作：

function updateTotal() {
    var total = 0;
    $('.invoice-line').each(function (i, elem) {
        total += parseFloat($(elem).find('.amount-input').val(), 10) || 0;
    });
    $('.total').val("$" + total);
}
于 2012-12-09T16:25:58.613 回答
0

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

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

你可以看到它在这个 jsfiddle中工作。

于 2012-12-09T16:26:04.290 回答
0

发布后不久，我能够提出自己的解决方案，如下所示：

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));
}
于 2012-12-09T16:30:08.297 回答