jquery if else statement hasClass addClass click

Question

I'm new to jQuery but I am already incredibly impressed with its power. Here's my question:

I want to

add class='dec' to #jf1 when I click it if it has class='undec'
add class='undec' to #jf1 when I click it if it has class='dec'

Here's what I have - it isn't working!

<script>
$(document).ready(function(){
$(function() {

    $('#jf1').click(function() {

        if ('#jf1'.hasClass("undec")) {
            $('#jf1').toggleClass("undec dec");
    }
        else if ('#jf1'.hasClass("dec")) {
            $('#jf1').toggleClass("dec undec";
    }

    });

});
});
</script>

why you use $(document) and $(function) both together ?

Devang Rathod
– Devang Rathod

2013-02-26 08:12:06 +00:00
Commented Feb 26, 2013 at 8:12 — Devang Rathod
– Devang Rathod, Commented Feb 26, 2013 at 8:12

Ram · Accepted Answer · 2013-02-26 08:17:29Z

6

There are several syntax errors in your code, your if statement should be:

if ( $('#jf1').hasClass("undec") ) {

Also $(function(){}) is shorthand version of $(document).ready(function(){}), you should not nest them. toggleClass removes and adds classes, so there is no need to use if statement here.

$(function() {
    $('#jf1').click(function() {
        // `this` refers to the clicked element
        $(this).toggleClass("undec dec");
    });
});

edited Feb 26, 2013 at 8:17

answered Feb 26, 2013 at 8:10

Ram

145k16 gold badges174 silver badges201 bronze badges

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

1 Comment

user2110307 Over a year ago

Hey thanks for the quick response. I agree that .toggleClass is perfect for this - but I wanted to use an if/else statement because when I click the item, I also want to .show or .hide an element based on its CSS class, based on whether or not the "filter" has class='dec' or class='undec'

Aaron Lee · Accepted Answer · 2013-02-26 08:17:07Z

0

try this: http://jsfiddle.net/YS5F5/

 $(document).ready(function () {
    $('#jf1').click(function () {
        alert("hello");
        $('#jf1').toggleClass("undec");
        $('#jf1').toggleClass("dec");

    });
});

dont need the function again after the jQuery(document).ready portion

answered Feb 26, 2013 at 8:17

Aaron Lee

3621 gold badge5 silver badges11 bronze badges

Collectives™ on Stack Overflow

jquery if else statement hasClass addClass click

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related