Check for class using if, then add class jquery

Question

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

the `none` class is already there as you didnt remove it ! can you include your initial HTML ? — Manse, Nov 28 '11 at 10:27

score 1 · Answer 1 · edited May 23 '17 at 12:27

1

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.

edited May 23 '17 at 12:27

Community

1
1

answered Nov 28 '11 at 10:29

Ben Lee

52,489
13
125
145

The toggle class looks the best way, but it does not work? Is it because i have to already set up the class to show users what is already selected please see html; – Jason Congerton Nov 28 '11 at 10:43
`
class="featSelected"class="none">#txt_feat_name#checked="checked" />

Jason Congerton

Nov 28 '11 at 10:47

The toggle class looks the best way, but it does not work? Is it because i have to already set up the class to show users what is already selected please see html; – Jason Congerton Nov 28 '11 at 10:53

Andy E · Accepted Answer · 2011-11-28T10:37:25.560

1

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 */
}

edited Nov 28 '11 at 10:37

answered Nov 28 '11 at 10:31

Andy E

338,112
86
474
445

my apologies all working! what a great forum. I went with the toggle class! Didn't even have a chance to make a cup of tea and i had three answers! Thank you!! – Jason Congerton Nov 28 '11 at 10:52
1

@Jason: no problem (just be wary of who sees you calling this place a forum ;-)). Also, don't forget that you can mark the answer you found most helpful as the correct solution. This may help future site visitors that have the same problem as you find the solution quickly. – Andy E Nov 28 '11 at 11:03

score 0 · Answer 3 · answered Nov 28 '11 at 10:31

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.

Check for class using if, then add class jquery

3 Answers3