javascript - 总值不变，小计变化

Question

我有一个小计的 js 代码，当我改变它的文本字段的值时，这个小计会改变，但是当 TotalSavings 和 TotalVariable 的这个字段改变时，它应该也会改变我的 TotalExpenses 的值，但它没有这样做.我的 TotalSavings、TotalVariable 和 TotalExpenses 的文本字段是只读的，我怎样才能使我的 TotalExpenses 根据我的小计中的值进行更改:TotalSavings 和 TotalVariable

这是我的小计js代码，

$(function() {
    $("#Insurance, #COL, #Saveup, #SSS").keyup(function() {
        var i = parseInt($("#Insurance").val(), 10);
        var c = parseInt($("#COL").val(), 10);
        var s = parseInt($("#Saveup").val(), 10);
        var e = parseInt($("#SSS").val(), 10);
        $("#TotalSavings").val(i + c + s + e);
    });
});


$(function() {
    $("#Fares, #Recreation, #OtherExpenses").keyup(function() {
        var f = parseFloat($("#Fares").val(), 10);
        var r = parseFloat($("#Recreation").val(), 10);
    var o = parseFloat($("#OtherExpenses").val(), 10);
        $("#TotalVariable").val(f + r + o);
    });
});

这是我的总计js代码，

$(function() {
    $("#TotalSavings, #TotalVariable").keyup(function() {
        var t1 = parseFloat($("#TotalSavings").val(), 10);
        var t2 = parseFloat($("#TotalVariable").val(), 10);
        $("#TotalExpenses").val(t1 + t2);
    });
});

Answer 1

不要使用 keyUp 处理程序进行总值计数，为此使用函数。在您的情况下，永远不会调用 TotalSavings 和 TotalVariable 的 keyUp 回调函数，因为更改是通过脚本而不是用户输入以编程方式进行的。

$(function() {
    $("#Insurance, #COL, #Saveup, #SSS").keyup(function() {
        var i = parseInt($("#Insurance").val(), 10);
        var c = parseInt($("#COL").val(), 10);
        var s = parseInt($("#Saveup").val(), 10);
        var e = parseInt($("#SSS").val(), 10);
        $("#TotalSavings").val(i + c + s + e);
        updateTotalExpenses();
    });

    $("#Fares, #Recreation, #OtherExpenses").keyup(function() {
        var f = parseFloat($("#Fares").val(), 10);
        var r = parseFloat($("#Recreation").val(), 10);
    var o = parseFloat($("#OtherExpenses").val(), 10);
        $("#TotalVariable").val(f + r + o);
        updateTotalExpenses();
    });
});


function updateTotalExpenses() {
    var t1 = parseFloat($("#TotalSavings").val(), 10);
    var t2 = parseFloat($("#TotalVariable").val(), 10);
    $("#TotalExpenses").val(t1 + t2);
});