Javascript 在jQuery中检测类切换

我正在尝试制作一个非画布侧边栏，我正在使用

.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");

  });
});

.hasClass（'someClass'）

将帮助您检索布尔值

true/false

：确定是否将任何匹配的元素分配给给定的类。如果将类分配给元素，则.hasClass（）方法将返回

true

使用a的较短方法是：

$(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（）

（或类似选择器方法）的帮助下使用正确的选择器。为了明确起见。

您应该有另一种方法来选择对象，例如通过id，如下所示：

$("#myid")...

然后，您可以使用hasClass函数（）来验证该类是否已添加到对象中

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

---

我想你在找这样的东西。您只需要添加一个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");
   }

 });
});

---

您可以通过如下方式检查元素类列表来使用javascript：

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

---

更多信息请参见

如果

.btn

位于画布的

.row

内或旁边，我会使用CSS。@T.J.Crowder已经这样做了；）当然，更小=更有趣：）甚至：但调试起来很痛苦。：-）你刚才的编辑绝对是我应该做的。

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

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

 });
});

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