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

Question

我已经得到了这个jQuery来总结＆＃34; Amount＆＃34;中的所有值。退出任何一个列，更新＆＃34; Total＆＃34;文本输入总数：

/* 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，因为我得到了＆＃34; NaN＆＃34;在总计框中。

Answer 1

使用parseInt，因为val()会返回一个字符串

/* 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 here和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个jqueryeteers！

更新

我稍微对此进行了修改，意识到页面上有大量元素，并为其分配了“dplatypus-webform-field-input”类，其中大部分内容只会导致此事件无效/冗余。所以我添加了第二个类到“数量”框，如此（C＃）：

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

...并将jQuery更改为：

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

我为此给自己一个琥珀色的明星，现在考虑有4个jQueryeteers参与这个答案。

更新2

我已将其更改为浮动，并显示总计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

实际上，更新3并不完全有效，毕竟，因为退出/“模糊”一个文本输入导致“NaN”在所有空白（以及“总计”文本输入中）显示未经邀请。所以，这是执行它的繁琐方法：

/* 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，也许？