Question

当我输入一笔费用时，我正在尝试制作一个包含余额变化的标签。所以假设像......

<table>
    <tr>
        <td class="remainingBudget"></td>
        .
        .
        .

......然后......

<form>
    <table>
        <tr>
            <td><input class="percentCommitment"></td>
            <td><input class="totalAmount"></td>
            .
            . 
            .

用户永远不会触及totalAmount表单输入，只会percentCommitment，这将根据另一个值计算totalAmount，我们无需担心。我在totalCommitment的keydown事件上自动填充totalAmount输入，如下所示......

$(".percentCommitment").keyup(function() {
    var commit = caluculatePercentCommitment() || 0;
    var salary = getSalary();
    var amount;
    if (commit > 0 && salary > 0) {
        ttl = (salary * commit) / 100;
    } else {
        amount = 0.00;
    }

    $(this).parent().find('.amountCommitment').val(amount);
});

此部分工作正常，当人员更改percentCommitment值时，总金额会实时正确计算。这是有效的，因为我将人数的年薪与承诺百分比相乘的值是静态的。它没有改变。因此，如果该人输入1，则计算并显示1％的工资。如果用户然后使用相同的原始工资计算得出的12％，这正是我想要发生的事情。

问题在于实时计算剩余预算。从totalAmount中减去remainingBudget会产生问题，因为如果用户做同样的事情，输入1，那么我的jQuery会newRemainingBudget = remainingBudget - (0.01 * salary)，这很好，但是如果它们在2上我正在做newNewRemainingBudget = newRemainingBudget - (0.12 * salary)，这不是我想要的。我希望所有更改都是根据原始剩余预算计算的。

我试图做这样的事情......

 $(".totalAmount").change(function (event) {
            var remain = $(".remainingBudget").text();
            remain = formatDecimalInput(remain);
            var enter = $(".totalAmount).val();
            enter = formatDecimalInput(enter);
            if (enter <= remain) {
                $(".remainingBudget")text((remain-enter).formatCurrency());
            }
            else {
                // Do nothing
                event.preventDefault();
            }
        });

Answer 1

您必须在屏幕上有一个包含总预算金额的地方，并使用它和其他字段计算剩余金额。在更换时，请勿以这种方式使用字段。

remainingBudget = totalBudget - (0.01 * salary)

注意：如果需要，您可以使用隐藏的表单字段来保存总计。

使用jQuery进行实时会计更改

1 个答案: