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
– Manse, Commented Nov 28, 2011 at 10:27

Andy E · Accepted Answer · 2011-11-28 10:37:25Z

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, 2011 at 10:37

answered Nov 28, 2011 at 10:31

Andy E

346k86 gold badges482 silver badges452 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jason Congerton Over a year ago

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!!

Andy E Over a year ago

@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.

Community · Accepted Answer · 2017-05-23 12:27:37Z

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, 2017 at 12:27

CommunityBot

11 silver badge

answered Nov 28, 2011 at 10:29

Ben Lee

53.5k15 gold badges129 silver badges146 bronze badges

3 Comments

Jason Congerton Over a year ago

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 Over a year ago

<cfoutput group="uid_features">            <li><span id="feat#currentrow#" <cfif ListFind(ValueList(getProductFeatures.uid_prodf_featid, ","), getFeatures.uid_features, ",")>class="featSelected"<cfelse>class="none"</cfif>><label for="uid_prodf_featid#currentrow#">#txt_feat_name#</label><input name="uid_prodf_featid#currentrow#" id="uid_prodf_featid#currentrow#" type="checkbox" value="#uid_features#" <cfif ListFind(ValueList(getProductFeatures.uid_prodf_featid, ","), getFeatures.uid_features, ",")>checked="checked"</cfif> /></span></li></cfoutput>

Jason Congerton Over a year ago

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;

Anthony Grist · Accepted Answer · 2011-11-28 10:31:13Z

0

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.

answered Nov 28, 2011 at 10:31

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

Collectives™ on Stack Overflow

Check for class using if, then add class jquery

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related