0

I'm trying to create an "if" statement in jQuery to check if an element has one (or more) of a list of classes AND one (or more) of another list of classes. I don't seem to be having success. My code I've created so far is:

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

}
else {
}

Is there something I can do to make this work?

Any help greatly appreciated! Thanks!

**** EDIT ****

Here is a jsFiddle of more code that I am using: https://jsfiddle.net/4wajbutx/

I'm sorry if it's a bit complex, I wanted to include as much as possible to make sure any of my errors could be noticed, if there were any causing problems.

The point of my code here is that certain colors (such as white & black) should NOT be available when someone clicks the "neon" font option. I managed to handle that - it would deselect those colors and select "blue" when they clicked "neon." The problem is that if they have already selected "neon" and, say, the color "pink," if they click "neon" again (accidentally perhaps) then it changes their color selection to "blue." But this should ONLY happen if they have a different font option selected AND an invalid color option selected.

Wow I hope that makes sense to someone.

Zebulon Giancarlo Sola
  • 1
  • 1
  • you may use [filter](http://api.jquery.com/filter/) – gaetanoM Apr 24 '19 at 21:09
  • Have you tried `hasClass()`? – Nosnetrom Apr 24 '19 at 21:10
  • 1
    Exactly what problem are you having with your approach? Works fine. https://jsfiddle.net/a1gvfmy8/ Perhaps you could provide some code that demonstrates it *not* working. – freedomn-m Apr 24 '19 at 21:20
  • @Nosnetrom `hasClass()` doesn't allow you to specify a list of classes, so you'd have to write `x.hasClass("x") || x.hasClass("y") || x.hasClass("z")` to check for 3 different classes. – Barmar Apr 24 '19 at 21:25
  • Thanks for all the responses! I'll include a jsfiddle here with some more surrounding code. Maybe it's something else in my code preventing it from working. https://jsfiddle.net/4wajbutx/ – Zebulon Giancarlo Sola Apr 25 '19 at 21:23

2 Answers2

0

Your code is fine - it works as intended. You have a little example below how it works. This thread should help you as well: 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;
}
#a{background-color:orange;}
#b{background-color:green;}
#c{background-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>
jacqbus
  • 457
  • 3
  • 13
  • 1
    He's obviously having a problem. An answer that says his code works doesn't help solve that. – Barmar Apr 24 '19 at 21:54
0

Time to flee the country, I found my stupid mistake.

I was removing the very classes that my "if" statement was looking for BEFORE the "if" statement occurred, so of course it couldn't find them and it didn't work.

I now put that line after the "if" statement, and it works as expected.

Thanks guys, hope I didn't waste too much of anyone's time!

Zebulon Giancarlo Sola
  • 1
  • 1