在加载页面时迭代 class 到 div

Question

我在一个页面上有七个投资组合项目，其中只有一个的 class 为 "featured"，正如您可能猜到的那样，那个项目处于焦点状态。它更大并且有更多细节。

现在，我想更改 class，以每 5 秒循环一次所有投资组合项目。比方说。那将如何完成？请记住，我对 JS 还不是很好。仍在学习中，非常感谢您对此的帮助。

所以，回顾一下。我希望当访问者进入页面时，要更改特色投资组合项目，以浏览所有项目。

我对使用 vanilla JS ES6 感兴趣，所以没有 jQuery。但是，如果您也知道如何用 jQuery 完成它，请随意 post 它。

这是单个项目的 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>

class "featured" 正在添加到图形标签。

谢谢:)

Answer 1

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

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

至于时间迭代可以使用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>

在加载页面时迭代 class 到 div

Iterate class through div's, while page is loaded

javascript

loops

iterate

ecmascript-6