Question

如何将这一组颜色分配给一堆div？

var colors = ['#2d335b', '#535b2d', '#494949', '#d7d7d7', '9ad4ce'];

我知道我可以通过从我的阵列中随机选择颜色来做到这一点：

var random_color = colors[Math.floor(Math.random() * colors.length)];
$("div").css('background-color', random_color);

但是它按顺序使用了很多相同的颜色，我需要它们分散更多。如何按顺序分配它们从数组中的第一种颜色开始到最后再返回第一种颜色？

Answer 1

您可以完成循环元素并按列表长度修改索引。

var colors = ['#2d335b', '#535b2d', '#494949', '#d7d7d7', '9ad4ce'];
var divs = $('div');


for (var i = 0; i < divs.length; i++) {
    var color = colors[i % colors.length];

    $(divs[i]).css('background-color', color);
};

JSFiddle

或者稍微简洁一点的上述版本：

var colors = ['#2d335b', '#535b2d', '#494949', '#d7d7d7', '9ad4ce'];

// selecting the <div> elements, and chaining with the css()
// method; using that method to update the specified -
// 'background-color' - property using the anonymous function
// from which we use the index of the <div> in from the jQuery
// collection:
$('div').css('background-color', function (index) {

  // using the index to determine which color should
  // be retrieved, and returning it as the value
  // to set as the background-color. This approach
  // iterates over each element in the collection
  // and returns the appropriate value to each of
  // those elements:
  return colors[index % colors.length];
});

var colors = ['#2d335b', '#535b2d', '#494949', '#d7d7d7', '9ad4ce'];
$('div').css('background-color', function(index) {
  return colors[index % colors.length];
});

div {
  width: 50px;
  height: 50px;
  margin-bottom: 0.5em;
  border: 1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

JS Fiddle demo

或者，使用DOM：

// using an Immediately-Invoked Function Expression ("IIFE")
// in order that the function is executed when encountered,
// and doesn't require being called later:
(function (){
  var colors = ['#2d335b', '#535b2d', '#494949', '#d7d7d7', '9ad4ce'],

      // creating an Array from the collection returned by
      // document.querySelectorAll():
      divs = Array.from( document.querySelectorAll('div') );

  // iterating over that array of <div> elements, using
  // Array.prototype.forEach()
  divs.forEach( function (div, index) {
  // 'div' is the array-element of the Array over which
  // we're iterating,
  // 'index' is the index of that array-element in the
  // Array over which we're iterating.

    // setting the background-color style of each <div>
    // to the color retrieved from the Array:
    div.style.backgroundColor = colors[ index % colors.length ];
  });
})();

(function() {
  var colors = ['#2d335b', '#535b2d', '#494949', '#d7d7d7', '9ad4ce'],

    divs = Array.from(document.querySelectorAll('div'));
  divs.forEach(function(div, index) {
    div.style.backgroundColor = colors[index % colors.length];
  });
})();

div {
  width: 50px;
  height: 50px;
  margin-bottom: 0.5em;
  border: 1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

JS Fiddle demo

使用带箭头功能的DOM：

// using an Immediately-Invoked Function Expression ("IIFE")
// in order that the function is executed when encountered,
// and doesn't require being called later:
(function (){
  var colors = ['#2d335b', '#535b2d', '#494949', '#d7d7d7', '9ad4ce'],

      // creating an Array from the collection returned by
      // document.querySelectorAll():
      divs = Array.from( document.querySelectorAll('div') );

  // iterating over that array of div elements, as above;
  // the arguments in brackets are, again, the Array-element
  // from the Array, and its index in the Array. 
  // the right-hand side of the Arrow Function is exactly
  // as above:
  divs.forEach( (div, index) => div.style.backgroundColor = colors [ index % colors.length ]);
})();

(function() {
  var colors = ['#2d335b', '#535b2d', '#494949', '#d7d7d7', '9ad4ce'],

    divs = Array.from(document.querySelectorAll('div'));
  divs.forEach((div, index) => div.style.backgroundColor = colors[index % colors.length]);
})();

div {
  width: 50px;
  height: 50px;
  margin-bottom: 0.5em;
  border: 1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

JS Fiddle demo

Answer 2

实际上，您可以使用该范围内的值来阻止两种颜色的关闭。要做你想问的事情你可以设置currentColor值并在每次设置颜色时增加它。在使用数组中的元素（而不是随机数）时，可以使用currentColor作为索引。然后，您可以按数组长度修改结果，使其循环。

SCRIPT5009: 'MasterSlider' is undefined
File: www.dreamteam.gg, Line: 251, Column: 5

给出一系列颜色的颜色元素

2 个答案: