jQuery .click() 的按钮切换问题

Question

我想创建一个按钮，当 .click() 删除一个 class 并添加另一个按钮时。最后，我希望这两个按钮在我单击一个按钮和另一个按钮时更改它们的背景颜色。

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

注意这段代码确实"work"。当我点击我的按钮时，它确实会变成不同的颜色，但只是一瞬间，然后立即切换回来。我也尝试过使用 .on('click', function() {}) 但这也不起作用。

Answer 1

在不使用 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>

jQuery .click() 的按钮切换问题

jQuery button toggle issue with .click()

jquery

button

toggle