Question

我在页面上有重复的元素（部分）。我想迭代在数组中保存的三种颜色之间的元素的背景颜色。在其中一些元素中，我有文字（p），我想迭代这些相同的颜色，除了我希望它是数组中的下一个颜色作为背景。

因此，如果我有一个看起来像[“111111”，“222222”，“333333”]的数组，我希望第一部分的背景颜色为＃111111，第一部分的颜色为＃222222 。此外，页面上的元素数量多于数组中的项目数，因此我们需要循环返回数组。完成后的页面应如下所示：

<body>
  <section style="background-color: #111111;">
    <p style="color: #222222;">foo bar</p>
  </section>
  <section" style="background-color: #222222;">
    <p style="color: #333333;">foo bar</p>
  </section>
  <section style="background-color: #333333;">
    <!--no p in this one-->
  </section>
  <section style="background-color: #111111;">
    <p style="color: #222222;">foo bar</p>
  </section>
</body>

我完成了背景颜色部分，但我无法弄清楚如何转移到数组中的下一个项目，并在必要时从第一个项目开始。

var bgColors = ["111111", "222222", "333333"];
$('section').each(function(i) {
  var bgColor = bgColors[i % bgColors.length];
  $(this).css('background-color', '#'+bgColor);
  // How to do text color???
  $(this).find("p").css('color', ???);
});

脚本应该灵活，以便您可以添加和更改颜色。感谢。

编辑：我意识到我遗漏了一个重要的观点，即不是每个部分都有一个p，所以你不能独立地迭代它们。另外由于c＆amp; p mishap我的html与我的JS不匹配。道歉。

Answer 1

只需使用i+1作为前景的模数

这与你已经申请bgColor的逻辑相同，你只需要为前景再做一次

var bgColors = ["red", "green", "blue", "yellow"];
$(function() {
  $('.section').each(function(i) {
    var bgColor = bgColors[i % bgColors.length];
    var fgColor = bgColors[(i + 1) % bgColors.length];
    $(this).css('background-color',  bgColor);
    $(this).find(".text").css('color', fgColor);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="section">
  <div class="text">foo bar</div>
</div>
<div class="section">
  <div class="text">foo bar</div>
</div>
<div class="section">
  <div class="text">foo bar</div>
</div>
<div class="section">
  <div class="text">foo bar</div>
</div>

Answer 2

你可以有像

这样的逻辑

var bgColorIndex = i % bgColors.length;
var bgColor = bgColors[i % bgColors.length];
$(this).css('background-color', '#'+bgColor);
var fgColor = bgColorIndex + 1 === bgColors.length ? bgColors[0] : bgColors[bgColorIndex + 1];
$(this).find("p").css('color', fgColor);

检查下一个索引是否等于长度，将颜色设置为第一个项目，否则通过递增设置为下一个颜色。

代码示例

var bgColors = ['red', 'blue', 'green', 'yellow'];

$(document).ready(function() {
  $('.section').each(function(i) {
     var bgColorIndex = i % bgColors.length;
     var bgColor = bgColors[i % bgColors.length];
     $(this).css('background-color', bgColor);
     var fgColor = bgColorIndex + 1 === bgColors.length ? bgColors[0] : bgColors[bgColorIndex + 1];
     $(this).find(".text").css('color', fgColor);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="section">
    <div class="text">foo bar</div>
  </div>
    <div class="section">
    <div class="text">foo bar</div>
  </div>
    <div class="section">
    <div class="text">foo bar</div>
  </div>
    <div class="section">
    <div class="text">foo bar</div>
  </div>
</body>

Answer 3

您是否因为某些原因需要在JavaScript中执行此操作，还是纯CSS解决方案？因为你可以用：nth-child（）：

达到同样的效果

.section:nth-child(3n+1) {
  background-color: #111;
}
.section:nth-child(3n+1) .text {
  color: #222;
}
.section:nth-child(3n+2) {
  background-color: #222;
}
.section:nth-child(3n+2) .text {
  color: #333;
}
.section:nth-child(3n+3) {
  background-color: #333;
}
.section:nth-child(3n+3) .text {
  color: #111;
}

性能更高，没有FOUC，适用于禁用JavaScript等的人

Codepen：https://codepen.io/anon/pen/aLyOwJ

迭代元素时在数组中向前移动

3 个答案: