为什么这个 jQuery 模糊事件/整数数学失败？

Question

我有这个 jQuery 可以在退出任何一个列时对 "Amount" 列中的所有值求和，并用总数更新 "Total" 文本输入：

/* boxAmount1...boxAmount5 - when any of them change, update boxGrandTotal */
$(document).on("blur", '[id^="boxAmount"]', function (e) {
    var amount1 = $('[id$=boxAmount1]').val();
    var amount2 = $('[id$=boxAmount2]').val();
    var amount3 = $('[id$=boxAmount3]').val();
    var amount4 = $('[id$=boxAmount4]').val();
    var amount5 = $('[id$=boxAmount5]').val();
    var grandtotal = amount1 + amount2 + amount3 + amount4 + amount5;
    $('[id$=boxGrandTotal]').val(grandtotal);
});

然而，它不起作用，如您所见：

我忽略了什么？

更新

这里有一个 fiddle 显示即使在使用 parseInt() 时，代码也无法使用 jQuery 1.11.0，因为我在总计框中得到 "NaN" .

Answer 1

使用 parseInt 因为 val() returns 一个字符串

/* boxAmount1...boxAmount5 - when any of them change, update boxGrandTotal */
$(document).on("blur", '[id^="boxAmount"]', function (e) {
    var amount1 = parseInt($('[id$=boxAmount1]').val());
    var amount2 = parseInt($('[id$=boxAmount2]').val());
    var amount3 = parseInt($('[id$=boxAmount3]').val());
    var amount4 = parseInt($('[id$=boxAmount4]').val());
    var amount5 = parseInt($('[id$=boxAmount5]').val());
    var grandtotal = amount1 + amount2 + amount3 + amount4 + amount5;
    $('[id$=boxGrandTotal]').val(grandtotal);
});

Answer 2

在三只猫（本页上的 AmmarCSE（上文））Bhavin Solanki , and Sµßhrånil∂ here 的帮助下，我为工作代码组装了 mashup：

$(document).on("blur", '.dplatypus-webform-field-input', function (e) {
    var amount1 = $('[id$=boxAmount1]').val() != '' ? parseInt($('[id$=boxAmount1]').val()) : 0;
    var amount2 = $('[id$=boxAmount2]').val() != '' ? parseInt($('[id$=boxAmount2]').val()) : 0;
    var amount3 = $('[id$=boxAmount3]').val() != '' ? parseInt($('[id$=boxAmount3]').val()) : 0;
    var amount4 = $('[id$=boxAmount4]').val() != '' ? parseInt($('[id$=boxAmount4]').val()) : 0;
    var amount5 = $('[id$=boxAmount5]').val() != '' ? parseInt($('[id$=boxAmount5]').val()) : 0;
    var grandtotal = amount1 + amount2 + amount3 + amount4 + amount5;
    $('[id$=boxGrandTotal]').val(grandtotal);
});

感谢 3 位 jQuery 工程师！

更新

我稍微修改了一下，意识到页面上有大量元素分配给了 class "dplatypus-webform-field-input"，其中大部分只会导致此事件触发 no avail/redundantly.所以我添加了第二个 class 到 "amount" 框，就像这样 (C#):

CssClass = "dplatypus-webform-field-input amountbox",

...并将 jQuery 更改为：

$(document).on("blur", '.amountbox', function (e) {

我为此给自己一颗琥珀星，现在认为这个答案涉及 4 jQueryeter。

更新 2

我已经把它改成了浮点数，并显示了两位小数的总数：

$(document).on("blur", '.amountbox', function (e) {
    var amount1 = $('[id$=boxAmount1]').val() != '' ? parseFloat($('[id$=boxAmount1]').val()) : 0;
    var amount2 = $('[id$=boxAmount2]').val() != '' ? parseFloat($('[id$=boxAmount2]').val()) : 0;
    var amount3 = $('[id$=boxAmount3]').val() != '' ? parseFloat($('[id$=boxAmount3]').val()) : 0;
    var amount4 = $('[id$=boxAmount4]').val() != '' ? parseFloat($('[id$=boxAmount4]').val()) : 0;
    var amount5 = $('[id$=boxAmount5]').val() != '' ? parseFloat($('[id$=boxAmount5]').val()) : 0;
    var grandtotal = amount1 + amount2 + amount3 + amount4 + amount5;
    $('[id$=boxGrandTotal]').val(parseFloat(grandtotal).toFixed(2));
});

更新 3

现在强制所有条目为两位数：

$(document).on("blur", '.amountbox', function (e) {
    $('[id$=boxAmount1]').val(parseFloat($('[id$=boxAmount1]').val()).toFixed(2));
    $('[id$=boxAmount2]').val(parseFloat($('[id$=boxAmount2]').val()).toFixed(2));
    $('[id$=boxAmount3]').val(parseFloat($('[id$=boxAmount3]').val()).toFixed(2));
    $('[id$=boxAmount4]').val(parseFloat($('[id$=boxAmount4]').val()).toFixed(2));
    $('[id$=boxAmount5]').val(parseFloat($('[id$=boxAmount5]').val()).toFixed(2));
    var amount1 = $('[id$=boxAmount1]').val() != '' ? parseFloat($('[id$=boxAmount1]').val()) : 0;
    var amount2 = $('[id$=boxAmount2]').val() != '' ? parseFloat($('[id$=boxAmount2]').val()) : 0;
    var amount3 = $('[id$=boxAmount3]').val() != '' ? parseFloat($('[id$=boxAmount3]').val()) : 0;
    var amount4 = $('[id$=boxAmount4]').val() != '' ? parseFloat($('[id$=boxAmount4]').val()) : 0;
    var amount5 = $('[id$=boxAmount5]').val() != '' ? parseFloat($('[id$=boxAmount5]').val()) : 0;
    var grandtotal = amount1 + amount2 + amount3 + amount4 + amount5;
    $('[id$=boxGrandTotal]').val(parseFloat(grandtotal).toFixed(2));
});

更新 4

实际上，Update 3 并不完全有效，毕竟，退出/"blurring out of" 一个文本输入会导致 "NaN" 不请自来地出现在所有空白的（和 "grand total" 文本输入）。所以，这是繁琐的方法：

/* boxAmount1...boxAmount5 - when any of them change, update boxGrandTotal */
$(document).on("blur", '.amountbox', function (e) {
    var amount1 = $('[id$=boxAmount1]').val() != '' ? parseFloat($('[id$=boxAmount1]').val()) : 0;
    var amount2 = $('[id$=boxAmount2]').val() != '' ? parseFloat($('[id$=boxAmount2]').val()) : 0;
    var amount3 = $('[id$=boxAmount3]').val() != '' ? parseFloat($('[id$=boxAmount3]').val()) : 0;
    var amount4 = $('[id$=boxAmount4]').val() != '' ? parseFloat($('[id$=boxAmount4]').val()) : 0;
    var amount5 = $('[id$=boxAmount5]').val() != '' ? parseFloat($('[id$=boxAmount5]').val()) : 0;
    var grandtotal = amount1 + amount2 + amount3 + amount4 + amount5;
    $('[id$=boxGrandTotal]').val(parseFloat(grandtotal).toFixed(2));
});

$(document).on("blur", '[id$=boxAmount1]', function (e) {
    $('[id$=boxAmount1]').val(parseFloat($('[id$=boxAmount1]').val()).toFixed(2));
});

$(document).on("blur", '[id$=boxAmount2]', function (e) {
    $('[id$=boxAmount2]').val(parseFloat($('[id$=boxAmount2]').val()).toFixed(2));
});

$(document).on("blur", '[id$=boxAmount3]', function (e) {
    $('[id$=boxAmount3]').val(parseFloat($('[id$=boxAmount3]').val()).toFixed(2));
});

$(document).on("blur", '[id$=boxAmount4]', function (e) {
    $('[id$=boxAmount4]').val(parseFloat($('[id$=boxAmount4]').val()).toFixed(2));
});

$(document).on("blur", '[id$=boxAmount5]', function (e) {
    $('[id$=boxAmount5]').val(parseFloat($('[id$=boxAmount5]').val()).toFixed(2));
});

...但是我觉得有一个插件要来了；也许是 MaskMoney？

为什么这个 jQuery 模糊事件/整数数学失败？

Why is this jQuery blur event / integer math failing?

int

jquery

onblur

更新

更新

更新 2

更新 3

更新 4