Question

我想使用JavaScript根据给定数组colors来更改链接的背景颜色，并且主要使用for循环和javascript / jquery的父子选择器。当我到达颜色数组元素的末尾时，我将从颜色数组的第一个元素开始。

颜色var colors = ['#607ec7', '#ca85ca', '#61c436', '#e54e7e', '#f4b23f', '#46c49c'];

的数组

<div class="vce-featured-section">
   <a href="#" class="category-97">ReraFirst Updates</a>
   <a href="#" class="category-97">ReraFirst Updates</a>
   <a href="#" class="category-97">ReraFirst Updates</a>
   <a href="#" class="category-97">ReraFirst Updates</a>
   <a href="#" class="category-97">ReraFirst Updates</a>
   <a href="#" class="category-97">ReraFirst Updates</a>
   <a href="#" class="category-97">ReraFirst Updates</a>
   <a href="#" class="category-97">ReraFirst Updates</a>
   <a href="#" class="category-97">ReraFirst Updates</a>
 </div>

Answer 1

使用while循环，对于color数组的循环遍历，请使用colors[i % colors.length]：

var colors = ['#607ec7', '#ca85ca', '#61c436', '#e54e7e', '#f4b23f', '#46c49c'];

var i=0;
var aElem = $('.vce-featured-section a');
while(i !== aElem.length){
  $(aElem[i]).css('background', colors[i % colors.length]);
  i++;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vce-featured-section">
   <a href="#" class="category-97">ReraFirst Updates</a><br>
   <a href="#" class="category-97">ReraFirst Updates</a><br>
   <a href="#" class="category-97">ReraFirst Updates</a><br>
   <a href="#" class="category-97">ReraFirst Updates</a><br>
   <a href="#" class="category-97">ReraFirst Updates</a><br>
   <a href="#" class="category-97">ReraFirst Updates</a><br>
   <a href="#" class="category-97">ReraFirst Updates</a><br>
   <a href="#" class="category-97">ReraFirst Updates</a><br>
   <a href="#" class="category-97">ReraFirst Updates</a>
 </div>

使用PURE JS

var colors = ['#607ec7', '#ca85ca', '#61c436', '#e54e7e', '#f4b23f', '#46c49c'];

var i=0;
var aElem = document.querySelectorAll('.vce-featured-section a');
while(i !== aElem.length){
  aElem[i].style.background = colors[i % colors.length];
  i++;
}

<div class="vce-featured-section">
   <a href="#" class="category-97">ReraFirst Updates</a><br>
   <a href="#" class="category-97">ReraFirst Updates</a><br>
   <a href="#" class="category-97">ReraFirst Updates</a><br>
   <a href="#" class="category-97">ReraFirst Updates</a><br>
   <a href="#" class="category-97">ReraFirst Updates</a><br>
   <a href="#" class="category-97">ReraFirst Updates</a><br>
   <a href="#" class="category-97">ReraFirst Updates</a><br>
   <a href="#" class="category-97">ReraFirst Updates</a><br>
   <a href="#" class="category-97">ReraFirst Updates</a>
</div>

Answer 2

var colors = ['#607ec7', '#ca85ca', '#61c436', '#e54e7e', '#f4b23f', '#46c49c'];

for (i = 0; i <= colors.length; i++) {
    var a = document.createElement("a");
    var t = document.createTextNode("ReraFirst Updates" + i);
    a.setAttribute("style", "background:" + colors[i] + "");
    a.setAttribute("href", "#");
    a.setAttribute("class", "category-97")
    a.appendChild(t);
    var br = document.createElement("br");
    document.body.appendChild(a);
    document.body.appendChild(br);
}

Answer 3

您可以使用简单的.each循环设置颜色；

var colors = ['#607ec7', '#ca85ca', '#61c436', '#e54e7e', '#f4b23f', '#46c49c'];

var length = colors.length;
var currentColorIndex = 0;

$('.vce-featured-section a').each(function(index) {
  $(this).css('background-color', colors[currentColorIndex]);
  currentColorIndex = ++currentColorIndex % length;
});

<div class="vce-featured-section">
   <a href="#" class="category-97">ReraFirst Updates</a>
   <a href="#" class="category-97">ReraFirst Updates</a>
   <a href="#" class="category-97">ReraFirst Updates</a>
   <a href="#" class="category-97">ReraFirst Updates</a>
   <a href="#" class="category-97">ReraFirst Updates</a>
   <a href="#" class="category-97">ReraFirst Updates</a>
   <a href="#" class="category-97">ReraFirst Updates</a>
   <a href="#" class="category-97">ReraFirst Updates</a>
   <a href="#" class="category-97">ReraFirst Updates</a>
 </div>

如何使用JavaScript更改多个链接的背景颜色？

3 个答案: