Если значение больше, меньше и становится больше, чем снова

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

Что работает отлично

Интерфейс имеет несколько выбирает, входами и ползунки JQuery, которые изменяют значение formula. Логика отлично работает при загрузке страницы, а значение формулы - >= 0. Если значение < 0, то formula также прекрасно работает.

Этот вопрос

Если значение формулы является < 0, а затем становится > 0 снова, поскольку пользователь изменяет значения, способствующие formula, логика не изменяет класс обратно .is-positive исключением случаев, когда страница обновляется.

Моя цель

Я хочу, чтобы класс .is-positive применяться без страницы освежающим, если значение выходит из < 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

Answer 2

Вы используете addClass() и не очищаете существующие классы, поэтому вы получаете оба набора классов. Вы должны удалить ранее установленные классы через removeClass() или toggleClass().

Кроме того, я бы рекомендовал сделать то же самое с частью .append('<p>Remaining</p>');, так что вы просто не добавляете абзацы, но swich их.