jQuery if/else hasClass(否则不起作用)

Question

我正在尝试使用 jQuery 和 hasClass 来学习 if else 语句。我做了一个简单的测试，但不起作用，我不明白为什么。

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

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

} else {

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

}

我很困惑，因为当我进入 Chrome 中的开发工具时，第一次单击按钮效果很好，并且类已正确切换，并且 left 被删除。我不确定为什么 else 语句不起作用。在我看来一切都是正确的。

Link to fiddle

Answer 1

您在点击之前进行检查，然后处理程序总是执行相同的操作。

您想要 checkin 处理程序:

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

或者，当然，使用 toggleClass ，但我认为你正在学习 if/else...

<小时/>

旁注:我不会像那样重新查询，我会记住该集合并重用它(连同链接):

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