Question

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

我有点困惑，这是怎么回事，因为在击中true 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使其无法第二次发生，因此现在一切似乎都可以正常工作

尽管if语句为True，但仍执行Javascript其他语句

1 个答案: