使用jQuery检测类切换

Question

我正在尝试制作一个离线画布侧边栏，并使用.toggleClass函数来使其激活或不激活。当它处于活动状态时，我想让按钮(.btn)显示“隐藏”，而当它处于非活动状态时则显示“显示”。 我已经尝试过使用if语句，但没有成功。我还查看了其他stackoverflow的问题，但没有成功。有谁能帮忙检测是否已切换类？

$(document).ready(function () {
  $('[data-toggle="offcanvas"]').click(function () {
    $('.row-offcanvas').toggleClass('active');

    // if active "hide"
    $('.btn').html("HIDE");

    // if not active "show"
    $('.btn').html("SHOW");

  });
});

- iampj

---

如果.btn在.row-offcanvas内部或旁边，我会使用CSS。 - T.J. Crowder

Answer 1

.hasClass('someClass')将帮助您检索一个布尔值true/false

^{api.jquery.com/hasclass:}确定任何匹配的元素是否被分配了给定的类。如果类被分配到元素上，.hasClass()方法将返回true

$(document).ready(function () {
  $('[data-toggle="offcanvas"]').click(function () {
    $('.row-offcanvas').toggleClass('active');
    var act = $('.row-offcanvas').hasClass("active");

    if(act){
       $('.btn').html("HIDE");
    }else{
       $('.btn').html("SHOW");
    }
  });
});

使用条件（三元）运算符可以更简短地写为：

$(function() {  // DOM ready

   $('[data-toggle="offcanvas"]').on("click", function () {
     var $row = $('.row-offcanvas').toggleClass('active');
     $('.btn').html($row.hasClass("active") ? "HIDE" : "SHOW");
   });

});

我必须警告你，通过选择像 $（“.btn”）这样的元素将改变页面上每个单独的 .btn元素。 请始终确保使用正确的选择器，并借助.find()（或类似的选择器方法）来增强特定性。

- Roko C. Buljan

---

@T.J.Crowder已经做过了 ;) 但是当然，更小=更有趣 :) - Roko C. Buljan

甚至可以使用：http://pastie.org/9803880 但是那样很难调试。:-) 您刚才的编辑绝对是我会这样做的。 - T.J. Crowder

Answer 2

你应该拥有另一种方式来选择你的对象，例如通过ID，如下所示：

$("#myid")...

然后你可以使用hasClass函数 (http://api.jquery.com/hasclass/) 来验证类是否已经添加到对象中。

$("#myid").hasClass("xxx")

- Nicola Ferraro

Answer 3

$(document).ready(function () {
  $('[data-toggle="offcanvas"]').click(function () {
    if ($('.row-offcanvas').toggleClass('active').hasClass('active'))
      $('.btn').html("HIDE");
    else 
      $('.btn').html("SHOW");
  });
});

- Ionică Bizău

Answer 4

我认为您正在寻找类似于此的东西。您只需要添加一个if/else语句来检查类。

$(document).ready(function () {
 $('[data-toggle="offcanvas"]').click(function () {
 $('.row-offcanvas').toggleClass('active');

  if ($('.row-offcanvas').hasClass('active')){
    $('.btn').html("HIDE");
   }
  else{
   $('.btn').html("SHOW");
   }

 });
});

http://jsfiddle.net/GregWebBandit/Lmfok39k/

- gregdevs

Answer 5

您可以通过检查元素的classList来使用JavaScript，像这样：

var el = document.getElementById("elementId");
el.classList.contains("foo");

更多信息请参见Mozilla文档

- David Pena