尽管 if 语句为真，但仍执行 Javascript Else 语句答案

【问题标题】：Javascript Else Statement Being Executed Despite If Statement Being True尽管 if 语句为真，但仍执行 Javascript Else 语句
【发布时间】：2020-08-19 06:13:14
【问题描述】：

我正在尝试使用 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”类的标签触发的语句。

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

【问题讨论】：

似乎事件处理程序被多次调用而不是 JavaScript 中的 if 结构被破坏了。
有趣，感谢有道理。知道如何调试吗？什么会使点击事件在点击时被触发两次？
你完全正确，我在点击功能的开头添加了一个带有计数器的警报，每次点击目标标签时它确实调用了两次。现在我只需要尝试找出导致它被调用两次的原因。
它匹配的类可以匹配多个嵌套元素？点击事件可能会通过它们向上传播。尝试在沙盒中复制行为，例如问题中的代码 sn-p。
@David 具有类“目标标签”的元素仅在 HTML 中出现一次，因此情况似乎并非如此。不过谢谢你的想法。

标签： javascript jquery coffeescript

【解决方案1】：

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

【讨论】：