Javascript Остальное заявление выполняется, несмотря на то, что утверждение верно

Question

Я пытаюсь реализовать метку html с тремя состояниями с javascript, которая перебирает 3 разных имени класса css, когда пользователь нажимает на метку. Я использовал простой оператор if -> else if -> else if для переключения между 3 состояниями класса, но по какой-то причине он всегда выполняет как первый оператор true if, так и следующий оператор else, даже если он уже ударил оператор true если сначала.

Я немного озадачен тем, как это происходит, так как операторы, как предполагается, будут пропущены после выполнения оператора 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», которое находится внутри else, если оператор после оператора if, который запускается меткой, имеющей класс "active_goal".

Что я здесь не так делаю? Большое спасибо за любую помощь.

Answer 1

Я до сих пор не знаю, что вызывало мои события щелчка дважды, но я обнаружил, что добавление return false в конце функции щелчка остановило его во второй раз, так что, похоже, все работает сейчас.