Tlačidlo jQuery prepínať problém s .click () - jquery, tlačidlo, prepínanie

Chcel by som vytvoriť tlačidlo, ktoré keď .click () odstráni triedu a pridá ďalšiu. Nakoniec by som chcel, aby obe tlačidlá zmenili svoje farby pozadia, keď kliknem na jednu a druhú.

html

<button id="addBot" class="bot"><span>+</span></button>
<button id="subBot" class="bot"><span>-</span></button>

css

.bot {
border-color: #3071a9;
border-style: solid;
border-width: 1.5px;
border-radius: 0px;
width: 30px;
height: 20px;
}
.blue1 {
background-color: #3071a9;
}

.white1 {
background-color: #ffffff;
}

js

        $(document).ready(function() {
//1 is blue
//0 is white
var addColor = 1;
var subColor = 0;
$("#addBot").addClass("blue1");
$("#subBot").addClass("white1");

$("#addBot").click(function() {
if(addColor == 1) {
$("#addBot").removeClass("blue1");
$("#addBot").addClass("white1");
addColor = 0;
} else {
$("#addBot").removeClass("white1");
$("#addBot").addClass("blue1");
addColor = 1;
}
});
}

Poznámka Tento kód funguje. Keď kliknem na svoje tlačidlo, zmení sa na inú farbu, ale iba na zlomok sekundy sa okamžite prepne. Tiež som skúsil používať .on ("kliknite", funkcia () {}) a to tiež nefunguje.

odpovede:

Zjednodušte ďalej bez pridania farby var

var addColor = 1;
var subColor = 0;
$("#addBot").addClass("blue1");

$("#addBot").click(function() {
$("#addBot").toggleClass("blue1");
});

.bot {
border-color: #3071a9;
border-style: solid;
border-width: 1.5px;
border-radius: 0px;
width: 30px;
height: 20px;
background-color: #ffffff;
}
.blue1 {
background-color: #3071a9;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<button id="addBot" class="bot"><span>+</span></button>
<button id="subBot" class="bot"><span>-</span></button>