如果元素在 Jquery .hasClass() 函数中具有“class1”和/或“class2”

Posted 2023-05-08

【中文标题】如果元素在 Jquery .hasClass() 函数中具有“class1”和/或“class2”

【英文标题】：If element has "class1" and/or "class2" in Jquery .hasClass() function

【发布时间】：2015-08-27 16:19:27

【问题描述】：

我想检查一个元素是否有这个类或另一个这样的类：

if ( $elem.hasClass("foo") || $elem.hasClass("bar") ) 
  // do something

我还想检查一个元素是否有两个类：

if ( $elem.hasClass("foo") && $elem.hasClass("bar") ) 
  // do something else

有没有办法在hasClass() 函数中完成这一切？比如：

if ( $elem.hasClass("foo bar") ) 
  // do something when element has both classes

else if ( $elem.hasClass("foo","bar") ) 
  // do something when element has either class

【问题讨论】：

你可以试试$element.is('.foo, .bar')

JQuery .hasClass for multiple values in an if statement 的可能重复项

你想如何用一个表达式来表达两个相反的表达式？ $elem.hasClass("foo bar") 是否意味着它具有两个类或其中一个类？如果你不告诉它，jQuery 怎么知道你想表达什么？

然后使用例如if($element.is('.foo.bar'))...else if($element.is('.foo, .bar'))...

所以is() 比hasClass() 在使用多个类或条件时更有用？

【参考方案1】：

严格回答你的问题：不，你不能。

hasClass() 接受单个参数。

正如其他人指出的那样，您可能会使用is()，但here is a test 表明表演受到了很大的惩罚。

我建议您保留当前的代码。

【讨论】：

我认为is() 的表现比hasClass() 差，但从未得到证实。所以使用运算符比使用is()?

是的。我在答案中添加了一个测试。

【参考方案2】：

你可以做一些不同的事情来完成这个。不确定这是否满足您的需求。

使用多个选择器可以查看页面上是否存在匹配的元素 使用每个来执行你想要的代码

这样的例子：

$("span.foo, span.bar").each( function() 
  $(".test").html("foo or bar was found");
);

JS 小提琴：http://jsfiddle.net/s3gL5pwm/1/

使用 if 的第二种解决方案是使用 .is() 代替。

例如：

if ($("span").is(".foo, .bar"))  
    $(".test").html("foo or bar exists");    
;

JSfiddle：http://jsfiddle.net/eL2a8smt/

【讨论】：

添加了第二个示例，使用 is 而不是 hasClass

更新了 jsFiddle 以使其更相关恕我直言 jsfiddle.net/s3gL5pwm/2 只是说，是的，有很多方法可以检查 OP 的预期行为