时间戳

首页 > 解决方案 > 尽管 if 语句为真，但仍执行 Javascript Else 语句

javascript - 尽管 if 语句为真，但仍执行 Javascript Else 语句

问题描述

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

我有点困惑这是如何发生的，因为 else 语句应该在一个 true if 语句被命中后被跳过。

这是我的代码：

$(".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”类的标签触发。

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

标签： javascriptjquerycoffeescript

解决方案

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

推荐阅读