Javascript 使用setTimeout将类添加到一个标记

我试图找到我的问题的答案，但我很确定我问谷歌的问题是错误的。 我有这样的代码：

<div class="icons">
  <i class="fas fa-sun iconDisp active-icon"></i>
  <i class="fas fa-cloud iconDisp"></i>
  <i class="fas fa-cloud-sun-rain iconDisp "></i>
  <i class="fas fa-cloud-moon iconDisp"></i>
  <i class="fas fa-cloud-showers-heavy iconDisp "></i>
</div>

---

也许在activeIcon中应该有一个循环，它遍历所有标记或其他东西，首先隐藏所有图标，然后手动将活动图标类添加到其中一个

.iconDisp{display:none；} .active图标{显示：块；} 在JavaScript中，您必须为每个图标添加一个事件侦听器，以便在单击时更改活动选项卡。在该侦听器中，检查当前单击是否不是活动选项卡，如果不是活动选项卡，则从当前活动中删除活动图标类，并将其更改为新的活动图标。大概是这样的：

const icons=document.queryselectoral.icons i'； icons.forEachicon=>{ icon.addEventListener'click'，事件=>{ if！icon.classList.包含“active-icon”{ 设置超时=>{ const currentActiveIcon=document.querySelector'.active icon'； currentActiveIcon.classList.删除'active-icon'； icon.classList.add'active-icon'； }，1000；//发生在1秒之后 } } } 此代码未经测试，是从内存中编写的，但应该可以工作。

此代码可能会对您有所帮助

const icons=document.queryselectoral.iconDisp'； 函数移除类{ Array.fromicons.mapicon=>{ icon.classList.removeactive-icon； }; } Array.fromicons.mapicon=>{ 图标。addEventListenerclick，e=>{ 设置超时=>{ 移除类； e、 target.classList.addactive-icon； },500; } }; i、 iconDisp{ 转换：所有.2易入易出； 颜色：黑色； 字体大小：12px； } i、 iconDisp.active-icon{ 颜色：红色； 字体大小：20px； } 文件

---

您可以向我们展示您尝试查看的内容吗？您希望将其添加到哪个元素？为什么设置超时？标记并设置Timeout作为一种动画，在添加到all时显示一个图标，因为您选择了all querySelectorAll'.iconDisp'如何更改它？谢谢，您将mi推向了正确的方向

const iconsLoader = document.querySelectorAll('.iconDisp');

const activeIcon = function (){
  if(!iconsLoader.classList.contains('active')) {
    iconsLoader.classList.add('active')
  } 
}