javascript - 如果值大于、小于并再次大于

Question

我的以下逻辑有问题。

Jsfiddle

逻辑

var budgetCalc = function (financeBudget, totalCost, remainingBudget, changeOn) {
    var reloadCalc = function () {
        var formula = parseFloat($(financeBudget).val()) - parseFloat($(totalCost).val());
        $(remainingBudget).val(Math.abs(formula.toFixed(0)));

        if ( formula >= 0 ) {
            $('.toolbar-budget').addClass('is-positive').append('<p>Remaining</p>');
        } else {
            $('.toolbar-budget').addClass('is-negative').append('<p>Over Budget</p>');        
        }
    };

    $(document).ready(function () {
        // Price Input
        $(changeOn).change(function () {
           reloadCalc();
        });
        $(changeOn).trigger('change');             
    });
};

什么工作正常

该界面有多个选择、输入和一个更改 formula 值的 jQuery slider .当页面加载且公式值为 >= 0 时，逻辑工作正常.如果值为 < 0比formula也能正常工作。

问题

如果公式的值为< 0然后变成> 0再次是因为用户更改了导致 formula 的值, 逻辑不会将类改回 .is-positive除非页面刷新。

我的目标

我想要 .is-positive 的类(class)如果值来自 < 0，则无需刷新页面即可应用至 >= 0 .

Answer 1

似乎最简单的解决方案是在添加适当的类之前删除两个类，但添加 $('.toolbar-budget').removeClass('is-positive is-negative');检查前:

$('.toolbar-budget').removeClass('is-positive is-negative');
if (formula >= 0) {
    $('.toolbar-budget').addClass('is-positive').append('<p>Remaining</p>');
} else {
    $('.toolbar-budget').addClass('is-negative').append('<p>Over Budget</p>');
}

jsFiddle example