jQuery If DIV Doesn t Have Class x

Question

In jQuery I need to do an if statement to see if  this doesn t contain the class   selected        thumbs   hover function       this  stop   fadeTo  normal   1 0     function      this  stop   fadeTo  slow   0 3          Basically when this function is run  on hover  I don t want to perform the fades if the class   selected  has been appended to the div  this will mean that the image will be at full opacity to signify that it s selected  Searched on Google to no luck even though it s a simple question of how to use an IF statement

User · Answer

thumbs   hover      function            if     this  hasClass  selected                    this  stop   fadeTo  normal   1 0                        function            if     this  hasClass  selected                    this  stop   fadeTo  slow   0 3                                    Putting an if inside of each part of the hover will allow you to change the select class dynamically and the hover will still work       thumbs   click function             thumbs   each function              if    this  hasClass  selected                    this  removeClass  selected                  this  hover                                             this  addClass  selected                             As an example I ve also attached a click handler to switch the selected class to the clicked item  Then I fire the hover event on the previous item to make it fade out

User · Answer

jQuery has the hasClass   function that returns true if any element in the wrapped set contains the specified class  if     this  hasClass  selected            do stuff     Take a look at my example of use   If you hover over a div  it fades as normal speed to 100  opacity if the div does not contain the  selected  class If you hover out of a div  it fades at slow speed to 30  opacity if the div does not contain the  selected  class Clicking the button adds  selected  class to the red div  The fading effects no longer work on the red div   Here is the code for it   lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN     http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  xml lang  en  lang  en  gt   lt head gt   lt script src  http   ajax googleapis com ajax libs jquery 1 3 1 jquery min js  gt  lt  script gt   lt title gt Sandbox lt  title gt   lt meta http-equiv  Content-type  content  text html  charset utf-8    gt   lt style type  text css  media  screen  gt  body   background-color   FFF  font  16px Helvetica  Arial  color   000     lt  style gt     lt  -- jQuery code here -- gt   lt script type  text javascript  gt    function          myButton   click function e        div2   addClass  selected             thumbs   bind  click  function e    alert  You clicked     e target id              thumbs   hover fadeItIn  fadeItOut          function fadeItIn e    if     e target  hasClass  selected               e target  fadeTo  normal   1 0            function fadeItOut e       if     e target  hasClass  selected               e target  fadeTo  slow   0 3           lt  script gt     lt  head gt   lt body gt   lt div id  div1  class  thumbs  style   background-color   0f0  margin  10px  padding  10px  width  100px  height  50px  clear  both   gt   One div with a thumbs class  lt  div gt   lt div id  div2  class  thumbs  style   background-color   f00  margin  10px  padding  10px  width  100px  height  50px  clear  both   gt  Another one with a thumbs class  lt  div gt   lt input type  button  id  myButton  value  add  selected  class to red div    gt   lt  body gt   lt  html gt    EDIT   this is just a guess  but are you trying to achieve something like this     Both divs start at 30  opacity Hovering over a div fades to 100  opacity  hovering out fades back to 30  opacity  Fade effects only work on elements that don t have the  selected  class Clicking a div adds removes the  selected  class   jQuery Code is here-    function          thumbs   bind  click  function e      e target  toggleClass  selected             thumbs   hover fadeItIn  fadeItOut       thumbs   css  opacity   0 3         function fadeItIn e    if     e target  hasClass  selected               e target  fadeTo  normal   1 0            function fadeItOut e       if     e target  hasClass  selected               e target  fadeTo  slow   0 3            lt div id  div1  class  thumbs  style   background-color   0f0  margin  10px  padding  10px  width  100px  height  50px  clear  both  cursor pointer   gt   One div with a thumbs class  lt  div gt   lt div id  div2  class  thumbs  style   background-color   f00  margin  10px  padding  10px  width  100px  height  50px  clear  both  cursor pointer   gt  Another one with a thumbs class  lt  div gt

User · Answer

How about instead of using an if inside the event  you unbind the event when the select class is applied  I m guessing you add the class inside your code somewhere  so unbinding the event there would look like this     element  addClass   selected    unbind   hover       The only downside is that if you ever remove the selected class from the element  you have to subscribe it to the hover event again

User · Answer

Use the  not  selector   For example  instead of       thumbs   hover    try       thumbs not  selected    hover

User · Answer

You can also use the addClass and removeClass methods to toggle between items such as tabs   e g   if   element  hasClass  selected         element  removeClass  selected

User · Answer

When you are checking if an element has or does not have a class  make sure you didn t accidentally put a dot in the class name    lt div class  className  gt  lt  div gt      div   hasClass  className       div   hasClass   className     will not work       After a long time of staring at my code I realized I had done this  A little typo like this took me an hour to figure out what I had done wrong  Check your code

User · Answer

I think the author was looking for     this  not   selected

[jquery] jQuery If DIV Doesn't Have Class "x"

Examples related to jquery