我可以在 jQuery 中创建一个“if”语句来检查一个集合中的一个类和另一个集合中的一个类吗？

Posted 2023-05-08

【中文标题】我可以在 jQuery 中创建一个“if”语句来检查一个集合中的一个类和另一个集合中的一个类吗？

【英文标题】：Can I make an "if" statement in jQuery to check for a class from one set AND a class from another?

【发布时间】：2019-09-14 06:02:21

【问题描述】：

我正在尝试在 jQuery 中创建一个“if”语句来检查一个元素是否具有一个（或多个）类列表和一个（或多个）另一个类列表。我似乎没有成功。到目前为止，我创建的代码是：

if ( $("#jacket_text").is(".color-white,.color-black,.color-silver") 
&& $("#jacket_text").is(".font-block,.font-script,.font-space") ) 


else 

我可以做些什么来完成这项工作吗？

非常感谢任何帮助！谢谢！

**** 编辑 ****

这是我正在使用的更多代码的 jsFiddle：https://jsfiddle.net/4wajbutx/

很抱歉，如果它有点复杂，我想尽可能多地包含，以确保我的任何错误都能被注意到，如果有任何导致问题。

我的代码的要点是，当有人单击“霓虹”字体选项时，某些颜色（例如白色和黑色）不应该可用。我设法处理了这个问题——当他们点击“霓虹灯”时，它会取消选择这些颜色并选择“蓝色”。问题是，如果他们已经选择了“霓虹灯”，比如说颜色“粉红色”，如果他们再次点击“霓虹灯”（可能是不小心），那么它会将他们的颜色选择更改为“蓝色”。但这只有在他们选择了不同的字体选项并且选择了无效的颜色选项时才会发生。

哇，我希望这对某人有意义。

【问题讨论】：

你可以使用filter

你试过hasClass()吗？

您的方法到底有什么问题？工作正常。 jsfiddle.net/a1gvfmy8 也许你可以提供一些代码来证明它不工作。

@Nosnetrom hasClass() 不允许您指定类列表，因此您必须编写 x.hasClass("x") || x.hasClass("y") || x.hasClass("z") 来检查 3 个不同的类。

感谢所有回复！我将在此处包含一个 jsfiddle 以及更多相关代码。也许这是我的代码中的其他东西阻止它工作。 jsfiddle.net/4wajbutx

【参考方案1】：

您的代码很好 - 它可以按预期工作。下面有一个小例子，它是如何工作的。该线程也应该对您有所帮助：JQuery .hasClass for multiple values in an if statement

$(document).ready(function() 
  if ($("#a").is(".one,.two,.three") && $("#a").is(".small-font,.triangle")) 
    $('#a').addClass('selected');
  
  
   if ($("#b").is(".five,.six") && $("#b").is(".square")) 
    $('#b').addClass('selected');
  
  
   if ($("#c").is(".nine,.ten") && $("#c").is(".i-dont-know-that-class-name")) 
    $('#c').addClass('selected');
  
);

div
  display:inline-block;
  width:100px;
  height:100px;
  margin-right:5px;
  opacity:0.1;
  color:#fff;
  text-align:center;
  line-height:100px;
  font-family:sans-serif;
  text-transform:uppercase;
  border:3px dotted transparent;

#abackground-color:orange;
#bbackground-color:green;
#cbackground-color:blue;

.selected
  opacity:1 !important;
  border-color:red !important;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="a" class="one two three four small-font triangle">Triangle</div>
<div id="b" class="five six seven eight  medium-font square">Square</div>
<div id="c" class="nine ten eleven  big-font circle">Circle</div>

【讨论】：

他显然有问题。说他的代码有效的答案无助于解决这个问题。

【参考方案2】：

是时候逃离这个国家了，我发现了我的愚蠢错误。

在“if”语句发生之前，我正在删除我的“if”语句正在寻找的类，所以它当然找不到它们并且它不起作用。

我现在将该行放在“if”语句之后，它按预期工作。

谢谢大家，希望我没有浪费任何人的时间！