Javascript/使用间隔将类添加到元素

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

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

第1项
第2项
第3项

---

想法是在文档准备就绪时在第一项上添加一个

--active

类，并在2秒后将其删除以将其添加到第二项，依此类推。

由于使用jQuery，您可以执行以下操作：

jQuery(() => { // callback when DOM is ready
  $('.panel1').addClass('active'); // add your class

  setTimeout(() => { // function that execute the callback after 2000ms (2s)
   $('.panel1).removeClass('active'); // remove your class active
  }, 2000);
});

---

如果您使用jQuery，您应该为您的different div使用不同的类。您可以使用

索引在
li
中循环，并在到达最后一个
li
元素时将索引重置为0：

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

希望这有帮助

jQuery解决方案：
$（函数（）{
var lis_count=$（'li.panel'）。长度；
var活跃指数=0；
setInterval（函数（）{
if（$（'li.panel.active'）.index（）=lis_count-1）
活动指数=0；
其他的
活动_li_索引++；
$（'li.panel.active'）.removeClass（'active'）；
$（'li.panel'）.eq（active_li_index）.addClass（'active'）；
}, 1000);
})
.active{
背景颜色：黄色；
}


第1项
第2项
第3项
窗口。添加EventListener（“加载”），功能更改（i=0）{
var els=document.getElementsByCassName（“面板”）；
if（els[i-1]）els[i-1].classList.toggle（“活动”）；
els[i].classList.toggle（“活动”）；
如果（i您可以使用类似的方法，则需要使用要启动的索引调用
toggleClass
，函数
addClass
和
removeClass
支持多个元素和多个类


//将类添加到元素
//支持多个类
函数addClass（元素、类名）{
//分班
var classArray=className.split（“”）；
var-els=[]；
//If元素没有length属性
if（elements.length==未定义）
els[0]=元素
其他的
els=元素；
对于（e=0；e无jQuery:


函数showGarland（）{
var itemClass='panel'；
var activeClass='--active'；
var wait=2000；//2秒
函数toggleActive（元素、索引、最大索引）{
setTimeout（函数（）{
element.classList.add（activeClass）；
setTimeout（函数（）{
element.classList.remove（activeClass）；
if（index==maxIndex）{
runLoop（）；
}
}，等等）；
}，等待*索引）；
}
函数runLoop（）{
var allItems=document.getElementsByClassName（itemClass）；
对于（var index=0；index

——激活{
颜色：红色；
}

第1项
第2项
第3项



第1项
第2项
第3项

.hide{
可见性：隐藏；
}
$（文档）.ready（函数（）{
var listItems=$（“#项目li”）；
//警报（列表项目）；
listItems.each（函数（idx，li）{
var乘积=$（li）；
setInterval（函数（）{
css（“可见性”、“可见”）；
$（li）.next（）.css（“可见性”、“隐藏”）；
$（li）.prev（）.css（“可见性”、“隐藏”）；
}, 2000);
});
});
不带jQuery：


函数showGarland（）{
var itemClass='panel'；
var activeClass='--active'；
var wait=2000；//2秒
函数toggleActive（元素、索引、最大索引）{
setTimeout（函数（）{
element.classList.add（activeClass）；
setTimeout（函数（）{
element.classList.remove（activeClass）；
if（index==maxIndex）{
runLoop（）；
}
}，等等）；
}，等待*索引）；
}
函数runLoop（）{
var allItems=document.getElementsByClassName（itemClass）；
对于（var index=0；index

——激活{
颜色：红色；
}

第1项
第2项
第3项
既然你使用jquery，你怎么知道？当我发表评论时，标签中有这个，但显然是经过编辑的，请参阅修订版：谢谢你的回答！我不使用jquery（不知道为什么它被标记成这样）在这个项目中，这就是为什么我要寻找一个香草JS来替代这种脚本。是的，这就是我要寻找的方法。我不确定是否能正确理解这种语法，但它对我有帮助！因此，如果我是正确的，它说‘在I=numbers of.panel之前向.panel元素添加一个类’，但我不确定
（els[I-1]）
@alexis wollseifen这是为了取消前一个代码的激活。这正是我试图做的，但在Javascript中（jQuery标记是一个错误），但我将保留此代码片段以防万一：）谢谢不客气，很高兴我能帮上忙。我刚刚添加了纯js解决方案。效果很好！我会保留这段代码-下一步：接受javascript培训：）再次感谢！
window.addEventListener("load",function change(i=0){
  var els=document.getElementsByClassName("panel");
  if(els[i-1]) els[i-1].classList.toggle("active");
  els[i].classList.toggle("active");
  if(i<els.length-1) setTimeout(change,2000,i+1);
});