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

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