时间戳

首页 > 解决方案 > 循环遍历从动态生成的索引开始的数组

javascript - 循环遍历从动态生成的索引开始的数组

问题描述

对不起，如果标题没有准确地抓住我的问题；不知道如何用一句话来写这个。

问题描述：假设我有一组颜色和一堆 div。我想通过数组颜色循环 div 背景颜色，但还要确保每个 div 从颜色数组中的不同位置开始。

示例：我的颜色数组是[red, blue, yellow, green]. 第一种div颜色从 开始，然后在 、 、之间red循环blue，然后再回到。Div2 从 开始，然后是，依此类推，直到我拥有尽可能多的元素。yellowgreenredblueyellow, green, red, bluediv

我能想象的两个潜在解决方案是：

  1. 我是否必须为每个 div 生成一个新的颜色数组？（也许通过在计数器上加 1 并进行拼接或推送或弹出操作）
  2. 我可以循环遍历原始数组，只是从每个 div 的不同位置开始吗？（根据其位置动态生成偏移量 - 1st div、2nd、3rd 等）

这两种方法都是解决问题的可行方法吗？

标签： javascripthtmlcssarrays

解决方案

只是为了好玩，这个 CSS 动画。问题被标记为

.color-change {
  --animation-duration: 5s;
  display: inline-block;
  height: 100px;
  width: 100px;
  animation: colors var(--animation-duration) steps(1, end) infinite;
}
.color-change:nth-child(4n+2) { animation-delay: calc(var(--animation-duration) * -.25) }
.color-change:nth-child(4n+3) { animation-delay: calc(var(--animation-duration) * -.5) }
.color-change:nth-child(4n+4) { animation-delay: calc(var(--animation-duration) * -.75) }


@keyframes colors {
  from,
  to  { background: red; }
  25% { background: blue; }
  50% { background: yellow; }
  75% { background: green; }
}
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>

推荐阅读