jQuery If/Else If not working

Question

I have this code:

$("#Editing").click(function(){
  if ($(this).attr("class","OptionsOpt-On")) 
    {$(this).attr("class","OptionsOpt-Off"); Edit = false;}

  else if ($(this).attr("class","OptionsOpt-Off")) 
    {$(this).attr("class","OptionsOpt-On"); Edit = true;}
});

I have searched and haven't been able to find a similar answer because all the ones that I found had problems with the code that I have identified to not be in my code. I don't know why the "else if" doesn't work, but if I change it to an if, it works just fine...

Fabrício Matté · Accepted Answer · 2013-04-14 23:34:17Z

4

attr with 2 arguments = setter = returns a jQuery object which is always a truthy value.

You should use it as a getter and do comparison:

if ( $(this).attr("class") === 'OptionsOpt-On' ) {
//...

Though .hasClass() may be more appropriate in this case:

if ( $(this).hasClass('OptionsOpt-On') ) {
    //...
} else {
    //...
}

As your element can't have both classes at the same time, you don't need a second if in the else.

Also assuming the element starts with one of the classes you can use .toggleClass() to toggle both classes without needing a conditional statement:

$("#Editing").click(function(){
    $(this).toggleClass('OptionsOpt-On OptionsOpt-Off');
    Edit = $(this).hasClass('OptionsOpt-On');
});

Fiddle

edited Apr 14, 2013 at 23:34

answered Apr 14, 2013 at 23:16

Fabrício Matté

70.3k27 gold badges135 silver badges168 bronze badges

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

2 Comments

Terry Over a year ago

The OP should also note that the target element has to has at least either class assigned to it before the .click() event, or else the if-else will not work because neither conditions are satisfied.

Fabrício Matté Over a year ago

@Terry Yes, nicely noted. =]

Hanlet Escaño · Accepted Answer · 2013-04-14 23:15:53Z

1

Maybe you are trying to do this:

if ($(this).attr("class")=="OptionsOpt-On")

The .attr function when used with two arguments works as a setter, while as a getter with just one argument.

answered Apr 14, 2013 at 23:15

Hanlet Escaño

17.4k10 gold badges54 silver badges76 bronze badges

Collectives™ on Stack Overflow

jQuery If/Else If not working

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related