Question

我正在这里的flexslider上工作。onClick下一步，我想添加它正在运行的类，但是当我第一次添加类，然后第二次单击而不是第三次单击时，将随机单击。我想在每次点击时添加一个类。这可能是if（）

中的问题

$('.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

您可以通过以下方式实现所需的功能

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

Answer 2

要在单击时添加/删除类，最好使用jquery toggleClass函数。

此外，在正确加载文档后，您可能需要执行click事件

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

有关更多信息，您可以参考：http://api.jquery.com/toggleclass/

循环内的onClick添加/删除类在jQuery中不起作用

2 个答案: