Question

我的以下逻辑存在问题。

逻辑

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

什么行得好？

界面有多个选择，输入和jQuery滑块，可以更改formula的值。当页面加载且公式值为>= 0时，逻辑工作正常。如果值为< 0，则formula的工作正常。

问题

如果公式的值为< 0，然后再次变为> 0，因为用户更改了对formula有贡献的值，则逻辑不会将类更改回{{1}除非页面刷新。

我的目标

如果值从.is-positive变为.is-positive，我希望在不刷新页面的情况下应用< 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

Answer 2

您使用addClass()并且不清除现有类，因此您最终会同时设置两个类。您应该通过removeClass()或toggleClass()删除之前设置的课程。

另外，我建议对.append('<p>Remaining</p>');部分做同样的事情，所以你不要只是附加段落，而是将它们加入。

如果值大于，小于并且再次大于

2 个答案: