用hasClass切换

Question

我正在尝试在切换时使用hasClass，但是我找不到一个可以做我想要的示例。基本上，一个按钮来回切换一个类。

以下是代码：

$("#sidebar-toggle-btn").click(function() {
  $("#sidebar").toggle();
  if($('#mapDiv').hasClass('col-lg-6')) {
    $('#mapDiv').removeClass('col-lg-6');
    $('#mapDiv').addClass('col-lg-8');
  };
  if($('#mapDiv').hasClass('col-lg-8')) {
    $('#mapDiv').removeClass('col-lg-8');
    $('#mapDiv').addClass('col-lg-6');
});

示例：http://jsfiddle.net/Monduiz/dzo5yg72/

hsz和tushar提出了正确的建议。这不起作用的原因是因为我是个白痴。我试图将切换应用到我界面中的错误按钮。所以这有效：

$("#projects-btn").click(function() {
  $('#sidebar').toggle();
  $("#mapDiv").toggleClass('col-lg-6 col-lg-8');
});

Answer 1

试试.toggleClass('col-lg-6 col-lg-8')：

$("#sidebar-toggle-btn").click(function() {
  $("#sidebar").toggle();
  $("#mapDiv").toggleClass('col-lg-6 col-lg-8');
});

Answer 2

toggleClass可以接受多个要切换的课程。

$('#mapDiv').toggleClass('col-lg-6 col-lg-8');

因此，if hasClass => removeClass else addClass与toggleClass相同。