jquery - How to implement 'if' on certain values?

Question

Again I'm new to jquery and am trying to get this office-space calculator to work. I want to use separate animation when my "total" value changes. Like if 1 is selected and "calculate" is selected, play animation.

Here where my widget is

$(document).ready(function () {
    $('#arrow-right').click(function () {
        if (parseInt($('#total').text()) < 3) {
          $('#total').text(parseInt($('#total').text()) + 1);
        }
    });
})
$(document).ready(function () {
    $('#arrow-left').click(function () {
        if (parseInt($('#total').text()) > 1) {
           $('#total').text(parseInt($('#total').text()) - 1);
        }
    });
})
$(document).ready(function () {
    $("#calculate").click(function () {
        if ('#total' == 1) {
            $("#requirements-contact").css("display", "block");
            $("#space-calculator").animate({
                height: '595px'
            }, "slow");
            var div = $("#space-total, #thousands, #hundreds, #tens, #units");
            div.animate({
                display: 'toggle'
            }, "slow");
            div.animate({
                bottom: '-895px'
            }, "slow");
            var div = $("#hundreds");
            div.animate({
                bottom: '-695px'
            }, "slow");
            var div = $("#tens");
            div.animate({
                bottom: '-395px'
            }, "slow");
            var div = $("#units");
            div.animate({
                bottom: '-195px'
            }, "slow");
        }
        if ('#total' == 2) {
            $("#requirements-contact").css("display", "block");
            $("#space-calculator").animate({
                height: '595px'
            }, "slow");
            var div = $("#space-total, #thousands, #hundreds, #tens, #units");
            div.animate({
                display: 'toggle'
            }, "slow");
            div.animate({
                bottom: '-895px'
            }, "slow");
            var div = $("#hundreds");
            div.animate({
                bottom: '-695px'
            }, "slow");
            var div = $("#tens");
            div.animate({
                bottom: '-395px'
            }, "slow");
            var div = $("#units");
            div.animate({
                bottom: '-195px'
            }, "slow");
        }
        if ('#total' == 3) {
            $("#requirements-contact").css("display", "block");
            $("#space-calculator").animate({
                height: '595px'
            }, "slow");
            var div = $("#space-total, #thousands, #hundreds, #tens, #units");
            div.animate({
                display: 'toggle'
            }, "slow");
            div.animate({
                bottom: '-895px'
            }, "slow");
            var div = $("#hundreds");
            div.animate({
                bottom: '-695px'
            }, "slow");
            var div = $("#tens");
            div.animate({
                bottom: '-395px'
            }, "slow");
            var div = $("#units");
            div.animate({
                bottom: '-195px'
            }, "slow");
        }
    });
})

Answer 1

If I understand you correctly what you need to do is: $('#total').val() if it is an editable input type element (like <input id='total' type="text">). If it is just a text inside of an element (like <span id="total">1<div>') what you need to do is:$('#total').text()` to get the text.

here is the full cod:

if ($('#total').val() == 3) {
  //do what you need to do...

}

or

 if ($('#total').text() == 3) {
      //do what you need to do...

 }

hope this is what you asked for.