问颜色元素给出一个颜色数组
EN

Stack Overflow用户

提问于 2016-01-23 18:48:41

回答 2查看 4.8K关注 0票数 3

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

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

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

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

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

javascript

jquery

玩转 EdgeOne Pages 有奖征集！

参与发文赢取龙鹅、按摩器、机械键盘等周边~

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-01-23 19:00:08

您可以完成它，循环元素和调制索引的列表长度。

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演示。

或者，使用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演示。

使用DOM和Arrow函数：

// 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演示。

票数 4

Stack Overflow用户

发布于 2016-01-23 18:56:49

实际上，您可以使用范围内的值步骤来防止2种颜色接近。要完成您所要求的操作，您可以设置一个currentColor值，并在每次设置颜色时增加它。当使用数组中的元素(而不是随机数)时，可以使用currentColor作为索引。然后，您可以根据数组长度对结果进行建模，这样它就循环了。

var currentColor = 0;
var colorArray = [1,2,3,4,5,6];

for(var i=0;i<colorArray.length*3;i++) {
  // When setting the color increment currentColor value
  document.write(colorArray[currentColor]); // This would actually be where you set the color based on the current color index
  currentColor = (currentColor + 1)%colorArray.length;
}