javascript - 根据数据类型总结编辑框列表？

Question

我有一个编辑框列表，其中包含值。有些是支出 (type-id="1")，有些是收入 (type-id="2")。

它们定义为:

<input class="change-handled form-control" type-id="@sub.CategoryTypeId" sub-category-id="@sub.SubCategoryId" data-id="@sub.CategoryBudgetId" style="text-align: right; width: 100%" type="number" value="@(sub.BudgetAmount.HasValue ? sub.BudgetAmount.ToString() : "")" />

目前，我有一个 javascript 函数，可以将它们全部加起来，并显示总数:

var total = 0;
        var $changeInputs = $('input.change-handled');
        $changeInputs.each(function (idx, el) {
                total += Number($(el).val());
        });
        $('#budgettedValue').text(total.toFixed(2));

这有效。但是，我需要显示支出总额和收入总额。

所以，我希望事情会像这样简单:

var total = 0;
        var $changeInputs = $('input.change-handled');
        $changeInputs.each(function (idx, el) {
            if ($(idx).attr('type-id') == 1) {
                totalExp += Number($(el).val());
            }
            if ($(idx).attr('type-id') == 2) {
                totalInc += Number($(el).val());
            }
        });

这行不通。有什么办法可以实现这个目标吗？

Answer 1

当您访问 attr 时，您正在使用 jQuery 包装索引 idx。而是使用 el 这是元素。

此外，您不需要两个 if，因为如果一个不是 1 类型，那么它必须是 2 类型

$changeInputs.each(function (idx, el) {
   if ($(el).attr('type-id') == '1')
     totalExp += Number($(el).val());
   else  
     totalInc += Number($(el).val());
});