javascript - 我需要在 Jquery 中从 'active' 项目开始循环

Question

我现在使用 JavaScript，我想循环设置每个 <li>类别“活跃”从 n° 1 到 <li> n° 4，然后每 3 秒重新开始到 n° 1。

到目前为止我有这个代码:

HTML

<ul class="collection">
     <li id="first" class="collection-item active">Desplazate hacia la pestaña <strong>HORARIOS</strong>.</li>
     <li id="second"  class="collection-item ">Ingresa tu N° de documento.</li>    
     <li id="third" class="collection-item ">Presiona el botón <strong>INGRESAR</strong>.</li>
     <li id="four" class="collection-item "><strong>LISTO!</strong> Ahora puedes ver los horarios de la semana.</li>
</ul>

JavaScript

 $(document).ready(function(){


    setInterval(animacion,3000);

    function animacion(){
        $currently_selected = $('li.active')

    // Loop back to first sibling if on the last one. 
        if ($currently_selected.next().length = 0){ 
        $next_selected = $currently_selected.siblings().first()
    } else {
       $next_selected = $currently_selected.next()

       $currently_selected.removeClass('active')
       $next_selected.addClass('active')
    }

    }
});

请帮助我!

Answer 1

• 在测试长度时使用==或===，因为=将充当赋值运算符并且它总是被评估为true
• else block 应在分配 $next_selected 变量后关闭

$(document).ready(function() {
  setInterval(animacion, 3000);

  function animacion() {
    $currently_selected = $('li.active');
    if ($currently_selected.next().length == 0) {
      $next_selected = $currently_selected.siblings().first();
    } else {
      $next_selected = $currently_selected.next();
    }
    $currently_selected.removeClass('active');
    $next_selected.addClass('active');
  }
});

.active {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul class="collection">
  <li id="first" class="collection-item active">Desplazate hacia la pestaña <strong>HORARIOS</strong>.</li>
  <li id="second" class="collection-item ">Ingresa tu N° de documento.</li>
  <li id="third" class="collection-item ">Presiona el botón <strong>INGRESAR</strong>.</li>
  <li id="four" class="collection-item "><strong>LISTO!</strong> Ahora puedes ver los horarios de la semana.</li>
</ul>