javascript - 使用 JavaScript 交替添加类到列表项

Question

我想在 2 秒后向从 0 索引开始的每个元素添加一个备用类 visible。 (如 0、1、2、3，...直到最后)。

当涉及到最后一个元素时，然后向后添加类，如 (10, 9, 8, ... 直到 0)，因此当再次处于 0 时，向前和向后就像一个无限循环。预先感谢您的帮助。

$(function() {
  iterate();

  function iterate() {
    var i = 0;
    var plus = setInterval(function() {
      i++;
      if (i == 10) {
        clearInterval(plus);
      }
    }, 1000);

    var minus = setInterval(function() {
      i--;
      if (i == 0) {
        clearInterval(minus); // again start plus interval
      }
    });

    $('li').removeClass('visible');
    $('li').eq(i).addClass('visible');
  }
});

.visible {
  background: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<ol>
  <li class="visible">One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine</li>
  <li>Ten</li>
</ol>

Answer 1

试试这个:尝试下面的代码，您可以在其中放置逻辑来保存当前索引并使用 setInterval 函数添加/删除类

$(function () {    
   var i = $("ol li").length;   
   var j =0;
   var down = true;
   setInterval(function(){
      if(i==j || j<0) {
        down = !down;
        if(j<0) {
           j=0;
        }
      }
      if(down) {
        $("ol li").eq(j).addClass("visible");
        j++;
      } else {
        $("ol li").eq(j).removeClass("visible");
        j--;
      }
   }, 2000);
});

 .visible {
        background: red
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol>
   <li>One</li>
   <li>Two</li>
   <li>Three</li>
   <li>Four</li>
   <li>Five</li>
</ol>