Trying to add class using if and else but not working properly

Question

I am trying to add class using if and else,but its not working beyond if not reaching to else.

$('.headings aside').click(function() {
    if ($(this).children('span').hasClass("fa-caret-up")) {
      $(this).children('span').addClass('borderGap');
      alert("Hello! I am an alert box!!");
    } else {
      alert("Second Alert");
      $(this).children('span').removeClass('borderGap');
    };
});

Thanks in advance

else { alert("Second Alert"); $(this).children('span').removeClass('borderGap'); } => use this (removed ;) — cracker
– cracker, Commented Apr 10, 2015 at 12:40
It actually works ... but only one at a time: jsfiddle.net/rfornal/LL9j7fzr — bob-fornal
– bob-fornal, Commented Apr 10, 2015 at 12:44
put $(this).children('span') into a variable, there is no reason to keep looking it up. — epascarello
– epascarello, Commented Apr 10, 2015 at 12:51

Christian Benseler · Accepted Answer · 2015-04-10 12:43:54Z

1

Your code works:

<aside> 
    <span class="no_class">no class</span>
</aside>

$('aside').click(function() {
    if ($(this).children('span').hasClass("fa-caret-up")) {
      $(this).children('span').addClass('borderGap');
      alert("Hello! I am an alert box!!");
    } else {
      alert("Second Alert");
      $(this).children('span').removeClass('borderGap');
    };
});

http://jsfiddle.net/cpyq6a5r/

The thing is, the behaviour will depend on the html markup.

Example: if you have 2 spans

<span class="no_class">no class</span>
<span class="fa-caret-up">no class</span>

it will never go into the "else" statement, because aside has a span with class "fa-caret-up"

answered Apr 10, 2015 at 12:43

Christian Benseler

8,0839 gold badges42 silver badges73 bronze badges

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

Comments

bob-fornal · Accepted Answer · 2015-04-10 12:45:34Z

0

I you are looking at getting both add and remove applied "on the same click", try ...

$('.headings aside').click(function() {
    if ($(this).children('span').hasClass("fa-caret-up")) {
      $(this).children('span').addClass('borderGap');
      alert("Hello! I am an alert box!!");
    }
    if (!$(this).children('span').hasClass("fa-caret-up")) {
      alert("Second Alert");
      $(this).children('span').removeClass('borderGap');
    }
});

Which will now check for caret and not caret ... in your original code, if any span had a caret, then the else is not run. Here, both conditions are checked independently.

answered Apr 10, 2015 at 12:45

bob-fornal

5,1205 gold badges34 silver badges45 bronze badges

Collectives™ on Stack Overflow

Trying to add class using if and else but not working properly

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related