CODEWITHSUNDEEP
jquery
Jason Congerton
Jason Congerton

Reputation: 830

Check for class using if, then add class jquery

I'm new to jquery and has some problems with the following code, the code is trying to replace the class of an item when clicked, the first part works as expected. If the item has a class of none it adds featSelected, however if i then click again to deselect it, it does not add the class of none. Any ideas would be appreciated, be gentle as i am in the throws of learning jquery(from book, looking at some courses though!).

 <script type="text/javascript">
          $('li span[id^="feat"]').click(function(){
          if ($(this).hasClass('none')) {
              $(this).addClass("featSelected") 
            }

            else if ($(this).hasClass('featSelected')) {
              $(this).addClass("none") 
            }

    })

    </script>

Any help would be appreciated.

Jason

Upvotes: 4

Views: 3011

Answers (3)

Andy E
Andy E

Reputation: 344517

Use the built-in toggleClass() function:

$('li span[id^="feat"]').click(function(){
    $(this).toggleClass("none featSelected");
});

Working demo: http://jsfiddle.net/7fBLH/

Alternatively, you might want to consider not using none as a class name, since it sounds like you're using it to semantically say "This element has no class". If that's the case, you should use default styling and CSS cascading:

li span[id^="feat"] { 
    /* default styles here */
}
.featSelected {
    /* these styles show when the element has this class name */
}

Upvotes: 1

Ben Lee
Ben Lee

Reputation: 53309

Your code is just adding the new class name. You also have to remove the old class name:

$('li span[id^="feat"]').click(function(){
    if ($(this).hasClass('none')) {
        $(this).removeClass("none");
        $(this).addClass("featSelected");
    } else if ($(this).hasClass('featSelected')) {
        $(this).removeClass("featSelected");
        $(this).addClass("none");
    }
});

But based on what you are doing, you can just use toggleClass on both of them:

$('li span[id^="feat"]').click(function(){
    $(this).toggleClass("none featSelected");
});

EDIT: I noticed your code was missing semicolons at the end of statements. I added them in in my examples above, and for future reference, you should always use semicolons to end statements in javascript.

Upvotes: 1

Anthony Grist
Anthony Grist

Reputation: 38345

jQuery's addClass() method doesn't overwrite any existing classes - if you want to overwrite classes on an element, you'll need to do more than simply call addClass().

As you're not actually removing the 'none' class, your if statement always evaluates to true, and the else code never gets executed.

Upvotes: 0

Related Questions