jquery - Bootstrap 按钮切换类问题

Question

我遇到了一个相当令人沮丧的问题，我不理解 jQuery 和 Bootstrap/CSS。从这个jsFiddle可以看出。单击蓝色类别按钮时，它不会应用新的 CSS 类，但另一个按钮显示得很好，您知道为什么会发生这种情况吗？

HTML:

<button type="button" class="btn btn-primary" id="btn_IncCat">Category</button>
<button type="button" class="btn btn-success" id="btn_IncCat2">Category</button>

CSS:

.btn-primary {
    color: #fff;
    background-color: #428bca;
    border-color: #357ebd;
}
.btn-success {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}

jQuery:

$(document).ready(function () {
    $('#btn_IncCat').click(function () {
        //  $('#btn_IncCat').css({ 'background-color': '#5cb85c','border-color': '#4cae4c' })
        $('#btn_IncCat').toggleClass('btn btn-success')
    })
})

Answer 1

当您使用 $('#btn_IncCat').toggleClass('btn success') 时类似于

if($('#btn_IncCat').hasClass('btn btn-success')) {
    $('#btn_IncCat').removeClass('btn btn-success')
} else {
    $('#btn_IncCat').addClass('btn btn-success')
}

第一个问题是你不需要删除btn类，bootstrap使用这个类来设置padding，border，边框半径，margin和其他你只想改变颜色的属性，这些属性在btn类中指定-主要所以代替

$('#btn_IncCat').toggleClass('btn btn-success');

做

if ($('#btn_IncCat').hasClass('btn-success')) {
    $('#btn_IncCat').removeClass('btn-success').addClass('btn-primary');
} else {
    $('#btn_IncCat').removeClass('btn-primary').addClass('btn-success');
}

甚至更好

$('#btn_IncCat').toggleClass('btn-primary btn-success')

这里是例子http://jsfiddle.net/wLxhj4ht/5/