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

我使用这个jQuery在退出“金额”列时将所有值相加，并用总计更新“总计”文本输入：

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

但是，它不起作用，正如您所看到的：

我忽略了什么

更新

---

这里有一个例子表明，即使在使用parseInt（）时，代码在使用jQuery 1.11.0时也不起作用，因为我在总计框中得到“NaN”。

使用

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

在三只猫的帮助下（本页（上图），Bhavin Solanki和Sßhrånil∂ , 我为工作代码组装了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个JQueryTeers

更新 我稍微修改了一下，意识到页面上有无数元素被分配了类“dplatypus webform field input”，其中大多数元素只会导致此事件无效/冗余地触发。因此，我在“数量”框中添加了第二个类，如（C#）：

…并将jQuery更改为：

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

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

更新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并不是很有效，毕竟，退出/“模糊”一个文本输入会导致“Na”在所有空白的（以及“Grand Tobe”文本输入）中不受欢迎地出现。因此，这里有一个乏味的方式：

/* 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？

等等，仔细看看你的问题，我认为问题是出于另一个原因。你能用小提琴重现这个问题吗？或者显示一些HTML吗？是的，即使使用parseInt（）也没有任何效果jazz，所以我将拨弄一下，然后回来汇报。这里是拨弄：使用jQuery1.11.0，我在总计框中得到“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));
});