使用.click（）

Question

我想创建一个按钮，当.click（）删除一个类并添加另一个类时。最后，当我点击其中一个时，我希望这两个按钮能够改变它们的背景颜色。

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

注意 此代码执行＆＃34;工作＆＃34;。当我点击我的按钮时，它确实会改变为不同的颜色但只是一瞬间然后立即切换回来。我也尝试使用.on（＆＃39;点击＆＃39;，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>