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

【问题标题】：jQuery button toggle issue with .click().click() 的 jQuery 按钮切换问题
【发布时间】：2015-06-23 20:19:16
【问题描述】：

我想创建一个按钮，当 .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;  
}

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

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

【问题讨论】：

您的意思是让任何#addBot 成为 if 中的 subBot？

标签： jquery button toggle

【解决方案1】：

在没有 var add color 的情况下进一步简化

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>

【讨论】：