javascript - 没有预期效果的数字总和jquery

Question

我是 javascript/jQuery 的新手，我无法获得预期的结果。即使只有一个输入有值，我也希望显示总数，否则我希望显示 0。但是现在它需要输入所有 3 个值才能显示总和。当我输入一个输入时，它不会简单地将下一个输入添加到总数中。我可以想象一系列冗长的条件语句，这些语句会交叉检查每个输入的 .length 并根据每个输入返回总数。当然必须有一种更简单/更清洁的方法。如果这是 java，我会使用 total += (variable) 并且它会在我进行时计算它们的总和。这似乎在这里不起作用。

    $('#invoice_labor, #invoice_materials, #invoice_other').keyup(function() {  
        if ($('#invoice_labor').length || $('#invoice_materials').length || $('#invoice_other').length ) {
            updateTotal();        
        } else {
            $('#invoice_total').html(0);
        }
    });     
    var updateTotal = function () {
        var input1 = parseFloat($('#invoice_labor').val(), 2);
        var input2 = parseFloat($('#invoice_materials').val(), 2);
        var input3 = parseFloat($('#invoice_other').val(), 2);
        var total = input1 + input2 + input3;      
        $('#invoice_total').html(total);
        $("#invoice_total").html(parseFloat($("#invoice_total").html()).toFixed(2));         
    };  

这里是 fiddle我正在修补。

因此，无论我在哪个字段中键入数字，我都希望总计发生变化。如果只有一个，total 将其添加到 total 变量并返回它。如果它是两者的任意组合，则将它们合并并添加到总数中。感谢您的帮助。

Answer 1

尝试

$('#invoice_labor, #invoice_materials, #invoice_other').keyup(function() {  
    updateTotal();        
});     
var updateTotal = function () {
    var input1 = parseFloat($('#invoice_labor').val()) || 0;
    var input2 = parseFloat($('#invoice_materials').val()) || 0;
    var input3 = parseFloat($('#invoice_other').val()) || 0;
    var total =  input1 + input2 + input3;      
    $("#invoice_total").html(total.toFixed(2));         
};  

演示:Fiddle

你的 fiddle 没有什么问题

1. 您在 body keyup 处理程序中注册输入 keyup 事件是错误的 - 这将导致无法识别第一次击键，并会在后续调用中触发多个 updatetotal 调用
2. 如果字段为空，parseFloat 将返回 NaN，添加时将返回 NaN 作为结果
3. parseFloat 只接受一个参数