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

当你使用$（＆＃39;＃btn_IncCat＆＃39;）。toggleClass（＆＃39; btn success＆＃39;）类似于

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

第一个问题是你不需要删除btn类，bootstrap使用这个类来设置填充，边框，边框半径，边距和其他你想要改变颜色的属性，这是在类btn中指定的-primary所以而不是

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

DO

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/

Answer 2

好的，这很简单。

当你这样做时

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

您将每个班级作为参数进行切换。您提供了btn和btn-success，因此当您点击该按钮时，它会将其关闭。

但是你想让btn课程保持正确吗？所以你不应该切换它。您想要交替切换btn-primary和btn-success。因此，您将代码更改为：

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

http://jsfiddle.net/wLxhj4ht/4/

Answer 3

HTML

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

jquery的

$(document).ready(function () {
  $('#btn_IncCat').click(function () {
      if($(this).hasClass('btn-primary')){
        $(this).removeClass('btn-primary');
        $(this).addClass('btn-success');
      }else{
        $(this).removeClass('btn-success');
        $(this).addClass('btn-primary');
      }
  });
});

Bootstrap按钮切换类问题

3 个答案: