jQuery if/else hasClass (else not working)

Question

I'm trying learn if else statements with jQuery and hasClass. I've done a simple test that won't work and I can't figure out why.

if ($('.one').hasClass('left')) {

  $('.button').click(function () {
    $('.one').addClass('right');
    $('.one').removeClass('left');
  })

} else {

  $('.button').click(function () {
    $('.one').addClass('left');
    $('.one').removeClass('right');
  })

}

I'm very confused because when I go to the dev tools in Chrome, the first click of the button works fine, and the classes are switched correctly and left is removed. I'm not sure why the else statement won't work though. Everything looks correct to me.

Link to fiddle

Do the if logic inside of a single event handler, and poof, there goes your problem! — Sterling Archer
– Sterling Archer, Commented Aug 16, 2017 at 16:37
Does registering a new click handler unregister previous ones? If not, both of the handlers are likely firing at once, cancelling each other out. — Carcigenicate
– Carcigenicate, Commented Aug 16, 2017 at 16:38

T.J. Crowder · Accepted Answer · 2017-08-16 16:38:14Z

3

You're doing your check before the click, and then the handler always does the same thing.

You want to do your check in the handler:

$('.button').click(function () {
    if ($('.one').hasClass('left')) {
        $('.one').addClass('right');
        $('.one').removeClass('left');
    } else {
        $('.one').addClass('left');
        $('.one').removeClass('right');
    }
});

Or, of course, use toggleClass, but I took it that you're studying if/else...

Side note: I wouldn't re-query like that, I'd remember the set and reuse it (along with chaining):

$('.button').click(function () {
    var one = $('.one');
    if (one.hasClass('left')) {
        one.addClass('right').removeClass('left');
    } else {
        one.addClass('left').removeClass('right');
    }
});

answered Aug 16, 2017 at 16:38

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

Comments

Terry · Accepted Answer · 2017-08-16 16:38:15Z

Your logic is inside out: you should be binding the click event once, and then within the callback function evaluate the if/else condition.

Your current code will only bind one of the two click events, because the hasClass() statement is evaluated at runtime.

$(function() {
 $('.button').click(function() {
  if ($('.one').hasClass('left')) {
    $('.one').addClass('right').removeClass('left');
  } else {
    $('.one').addClass('left').removeClass('right');
  }
 });
});

.one {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  transition: all 500ms;
}

.left {
  left: 10px;
}

.right {
  left: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one left"></div>
<button class="button">swap</button>

Yeedub · Accepted Answer · 2017-08-16 16:48:09Z

0

You'll need to put your "if" statement inside the "click" handler:

$('.button').click(function () {
  if ($('.one').hasClass('left')) {
    $('.one').addClass('right');
    $('.one').removeClass('left');
  } else {
    $('.one').addClass('left');
    $('.one').removeClass('right');
  }
})

answered Aug 16, 2017 at 16:48

Yeedub

861 silver badge7 bronze badges

Collectives™ on Stack Overflow

jQuery if/else hasClass (else not working)

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