JS if else if else

Question

Is there a way to run multiple if else statements from one event? For example, trying to run this, but it's only executing the first if else for the element with class "two" and not the second element which has class "three".

$(".hamburger-menu").click(function(){

    if ($(".two").hasClass("two-rotate")){
        $(".two").addClass("two-rotate-back").removeClass("two-rotate");
    } 
    else {
        $(".two").addClass("two-rotate").removeClass("two-rotate-back");
    }

    // This one won't execute
    if ($(".three").hasClass("three-rotate")){
        $(".three").addClass("three-rotate-back").removeClass("three-rotate");
    }
    else {
        $(".three").addClass("three-rotate").removeClass("three-rotate-back");
    }
});

I know the answer must be a simple one, but I've been searching for 30 minutes now and can't find the answer.

are you seeing any error message in your console? and does element with .three class actually exists? — Sourabh Kumar Sharma
– Sourabh Kumar Sharma, Commented Jun 6, 2015 at 9:38
To verify, put an alert("HERE"); after .two code finishes to make sure it is working or not. Maybe an error is raising? Also, you could try to put in alert($(".three").length) to make sure that it's finding it. — Brian Mains
– Brian Mains, Commented Jun 6, 2015 at 9:42
"Is there a way to run multiple if else statements from one event?" - Yes, there's nothing wrong with your logic. Have you stepped through it in the debugger? — Reg Edit
– Reg Edit, Commented Jun 6, 2015 at 9:42
There's no }); at the end of the handler. Is it missing? Or did you just omit it from the code you posted. — Reg Edit
– Reg Edit, Commented Jun 6, 2015 at 9:45

Nikhil Batra · Accepted Answer · 2015-06-06 11:18:34Z

1

There is missing }); at the end and also the click event may not be correctly binding.

Here is the working plunkr :"http://plnkr.co/edit/6hBXDFLXoGkHFBgvmbbx?p=preview"

edited Jun 6, 2015 at 11:18

answered Jun 6, 2015 at 9:51

Nikhil Batra

3,14816 silver badges20 bronze badges

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

Comments

Eric Douglas · Accepted Answer · 2015-06-06 09:56:53Z

0

You're not closing correctly your code.

Put the }); at the end.

When you need to debug some code, you could do something like that:

if ( someExpression ) {

    // logic here...
    console.log( 'passed through if' );   

} else {

    // logic here...
    console.log( 'passed through else' );
}

answered Jun 6, 2015 at 9:56

Eric Douglas

4597 silver badges12 bronze badges

Comments

Useless Code · Accepted Answer · 2015-06-06 11:47:50Z

0

I know you figured out your problem, but I just wanted to mention that if the -rotate and -rotate-back classes are mutually exclusive as they appear to be in your code, you could replace those if statements with a couple of short .toggleClass statements:

$(".hamburger-menu").click(function(){
    $(".two").toggleClass("two-rotate-back two-rotate");
    $(".three").toggleClass("three-rotate-back three-rotate");
});

http://jsfiddle.net/UselessCode/hc4Ldm9n/

answered Jun 6, 2015 at 11:47

Useless Code

12.5k5 gold badges37 silver badges42 bronze badges

Collectives™ on Stack Overflow

JS if else if else

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related