Javascript/将类添加到具有间隔的元素

Question

Javascript 不是我的强项，所以我正在寻求帮助:您将如何编写一个将类添加到具有间隔的 3 个元素的函数？

 <ul>
   <li class="panel">Item 1</li>
   <li class="panel">Item 2</li>
   <li class="panel">Item 3</li>
 </ul>

想法是在文档准备好时在第一项上添加一个 .--active 类，并在 2 秒后将其删除以将其添加到第二项，依此类推。

Answer 1

如果您使用的是 jQuery，则可以使用 index 遍历 li，并在到达最后一个 li 时将索引重置为 0 元素:

if( $('li.panel.active').index() == lis_count-1 )
    active_li_index  = 0;
else
    active_li_index++;

希望这对您有所帮助。

jQuery 解决方案:

$(function(){
   var lis_count = $('li.panel').length;
   var active_li_index = 0;
   
   setInterval(function(){
      if( $('li.panel.active').index() == lis_count-1 )
        active_li_index  = 0;
      else
        active_li_index++;
        
      $('li.panel.active').removeClass('active');
      $('li.panel').eq(active_li_index).addClass('active');
   }, 1000);
})

.active{
   background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
   <li class="panel active">Item 1</li>
   <li class="panel">Item 2</li>
   <li class="panel">Item 3</li>
 </ul>

纯 JS 解决方案:

document.addEventListener('DOMContentLoaded', function(){ 
   var lis = Array.prototype.slice.call( document.querySelectorAll('li.panel'));
   var lis_count = lis.length;
   var active_li_index = 0;
   
   setInterval(function(){
      var active_li = document.querySelector('li.panel.active');
      
      if( lis.indexOf(active_li) == lis_count-1 )
        active_li_index  = 0;
      else
        active_li_index++;
        
      active_li.classList.remove('active');
      document.querySelectorAll('li.panel')[active_li_index].classList.add('active');
   }, 1000);
}, false);

.active{
   background-color: yellow;
}

<ul>
   <li class="panel active">Item 1</li>
   <li class="panel">Item 2</li>
   <li class="panel">Item 3</li>
 </ul>