在 jQuery 中检测类切换

Detecting class toggle in jQuery

本文关键字：检测 jQuery      更新时间：2023-09-26

我正在尝试做一个画布外的侧边栏，我正在使用.toggleClass函数使其处于活动状态或不激活。当它处于活动状态时，我希望按钮 （.btn） 说"隐藏"，当它不说"显示"时。我已经尝试做一个 if 语句，但它失败了。我也看过其他堆栈溢出问题，但没有成功。任何人都可以帮助如何检测类是否已切换吗？

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

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()（或类似的选择器方法）的帮助下使用正确的选择器。为了特殊性。

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

$("#myid")...

然后，可以使用 hasClass 函数 （http://api.jquery.com/hasclass/） 来验证该类是否已添加到对象中。

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

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

我想你正在寻找这样的东西。你只需要添加一个 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/

你可以通过检查元素 classList 来使用 javascript，如下所示：

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

Mozilla Docs 中的更多信息

相关文章：