在加载页面时通过 div 迭代类

Question

我在一个页面上有一个七个投资组合项目，您中只有一个有一类"特色"，正如您可能猜到的那样，其中一个是焦点。它更大，有更多细节。

现在，我想更改该类，以每5秒之后通过所有投资组合项目迭代。假设。那将如何完成？请记住，我对JS还不那么好。仍在学习，所以我感谢您对此的帮助。

所以，回顾。我希望当访问者出现在页面上时，用于更改的特色投资组合项目，以浏览所有项目。

我有兴趣使用Vanilla JS ES6进行操作，所以没有jQuery。但是，如果您也知道如何使用jQuery完成它，请自由发布。

这是单个项目的HTML的示例。

<div class="portfolio-items">
                <!-- Portfolio item 1 -->
                <figure class="portfolio-item ">
                    <img src="img/portfolio-1.jpg" alt="portfolio-item">
                    <figcaption>
                        <h2 class="portfolio-title">Project Name</h2>
                        <p class="portfolio-desc">A short description could go right here</p>
                        <a href="#" class="portfolio-link">More info</a>
                    </figcaption>
                </figure>

类"特色"被添加到图标签中。

谢谢：）

Answer 1

您可以"收集"所有相关元素。并使用每个元素的classList.add或classList.remove方法添加或删除css类。

您应该跟踪添加类（集合中的下一个元素）以及需要删除类的元素索引（集合中的上一个元素）。

至于时间迭代，您可以使用setInterval函数。

这是一个很小的运行示例：

let currentIndex = 0;
const elements = document.getElementsByClassName('item');
setInterval(() => {
  const prevIndex = currentIndex === 0 ? elements.length - 1 : currentIndex - 1;
  const prevElement = elements[prevIndex];
  const nextElement = elements[currentIndex];
  prevElement && prevElement.classList.remove('active');
  nextElement && nextElement.classList.add('active');
  const nextIndex = currentIndex + 1;
  currentIndex = nextIndex === elements.length ? 0 : nextIndex
}, 1000);

.item {
  padding: 15px;
  margin: 0 5px;
}
.active {
  box-shadow: 0 0 1px 1px #333;
  background-color: green;
  color: #fff;
}

<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>