Jquery 引导按钮切换类问题_Jquery_Css_Twitter Bootstrap

Jquery 引导按钮切换类问题

jquery css twitter-bootstrap

Jquery 引导按钮切换类问题,jquery,css,twitter-bootstrap,Jquery,Css,Twitter Bootstrap,对于jQuery和Bootstrap/CSS，我有一个相当令人沮丧的问题，我不理解。从这里你可以看到。当点击蓝色的类别按钮时，它不会应用新的CSS类，但是另一个按钮显示的很好，你知道为什么会出现这种情况吗 HTML: jQuery： $(document).ready(function () { $('#btn_IncCat').click(function () { // $('#btn_IncCat').css({ 'background-color': '#5cb

对于jQuery和Bootstrap/CSS，我有一个相当令人沮丧的问题，我不理解。从这里你可以看到。当点击蓝色的类别按钮时，它不会应用新的CSS类，但是另一个按钮显示的很好，你知道为什么会出现这种情况吗

HTML:

jQuery：

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

使用$（'#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使用该类设置填充、边框、边框半径、边距和其他属性，您只想更改颜色，它是在类btn primary中指定的，因此不是

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

做

甚至更好

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

这里的示例是使用$（'btn'u 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_IncCat').toggleClass('btn btn-success');

做

甚至更好

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

下面是示例

html

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

html

好的，这真的很简单

当你这样做的时候

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

您正在切换作为参数给出的每个类。您提供了

btn

和

btn success

，因此当您单击按钮时，它会将其关闭

但是你想保留

btn

类，对吗？所以你不应该切换它。您希望交替切换

btn主

和

btn成功

。因此，您将代码更改为：

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

好的，这很简单