onClick добавить / удалить класс внутри цикла не работает в jquery

Question

Я работаю над flexslider здесь. Нажмите далее. Я хочу добавить класс, он работает, но случайный щелчок происходит, когда я нажимаю первый добавленный класс, а затем второй щелчок, а не третий.Я хочу добавить класс каждый клик.Здесь может быть проблема в том, если ()

$('.flex-next').on('click', function() {

  if ($('.timeline span').hasClass('clicked')) {
    $('.timeline span.clicked').removeClass('clicked');
    $(this).addClass('clicked');
  } else {
    $('.timeline span').removeClass('clicked');
    $('.timeline span').addClass('clicked');
  }
});

.timeline {
  content: '';
  background-color: rgba(255, 255, 255, 0.52);
  display: block;
  width: 100px;
  height: 2px;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  position: relative;
}

.timeline span:before {
  position: absolute;
  left: 0;
  top: -1px;
  content: '';
  background-color: red;
  display: block;
  height: 3px;
  animation: yourAnimation 1s 0s linear;
}

.timeline span.clicked {
  position: absolute;
  left: 0;
  top: -1px;
  content: '';
  background-color: blue;
  display: block;
  height: 3px;
  animation: yourAnimation 1s 0s linear;
}

@keyframes yourAnimation {
  0% {
    width: 0;
  }
  50% {
    width: 50%;
  }
  82% {
    width: 100%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex-next">Click here</div>
<span class="timeline">
			<span></span>
</span>

Answer 1

Чтобы добавить / удалить класс по щелчку, лучше использовать функцию jquery toggleClass.

Более того, вам может потребоваться выполнить событие щелчка после правильной загрузки документа

$( document ).ready(function() {
  $('.flex-next').on('click', function(){   
    $('.timeline span').toggleClass( "clicked" );
  });
});

Для получения дополнительной информации вы можете обратиться к: http://api.jquery.com/toggleclass/

Answer 2

Вы можете получить необходимую функциональность как

$('.flex-next').on('click', function(){    
   if (! ($('.timeline span').hasClass('clicked')) ) {
        $('.timeline span').addClass('clicked');
        setTimeOut(function(){
  $('.timeline span').removeClass('clicked');
   } , 200)
    }
});