尽管条件为真，但仍执行Javascript其他语句

Question

我正在尝试使用JavaScript实现三态html标签，当用户单击标签时，该标签会在3个不同的CSS类名称之间进行迭代。我使用了一个简单的if-> else if-> else if语句在3个类状态之间切换，但是由于某种原因，即使它已经命中，它总是同时执行第一个true if语句和下一个else语句首先为真if语句。

我有点困惑，这是怎么回事，因为在命中真if语句后应该跳过else语句。

这是我的代码：

$(".goal-label").on('click', function() {
      if ($(this).hasClass('active_goal')) {
        alert('has active_goal');
        $(this).removeClass('active_goal');
        return $(this).addClass('complete_goal');
      } else if ($(this).hasClass('complete_goal')) {
        alert('has complete_goal');
        $(this).removeClass('complete_goal');
        return $(this).addClass('failed_goal');
      } else if ($(this).hasClass('failed_goal')) {
        $(this).removeClass('failed_goal');
        return $(this).addClass('active_goal');
      }
    });

因此标签上的初始类是“ active_goal”，当我单击它时，我看到警报“ has active_goal”，然后我立即看到另一个警报“ has complete_goal”，它位于if语句之后的else if语句中由具有“ active_goal”类的标签触发。

我在这里做错了什么？非常感谢您的帮助。

Answer 1

我仍然不知道是什么导致我的点击事件触发两次，但是我发现在点击功能的末尾添加return false阻止了它第二次发生，所以现在一切似乎都可以正常工作。