如何为每个单独的div赋予随机的背景颜色？

Question

我正在构建一个网站，希望页面上的每个

都是以下选择中的随机颜色。但是一旦运行代码，每个

都是相同的颜色。我做错了什么？

 $(document).ready(function(){ 
   var colors = ['red','blue','green','yellow','cyan','orange'];
   var new_color = colors[Math.floor(Math.random()*colors.length)];
   $('.color-div').css('background-color',new_color);
 });

- WebStudent

---

一个更广泛的随机颜色生成器可能会引起您的兴趣：得票数为757的答案。 - Louys Patrice Bessette

你想让每个 div 有不同的颜色吗？ - Louys Patrice Bessette

Answer 1

以下是解决方案，您需要遍历所有的.color-div，并为每个元素设置一个“随机”颜色。

它使用.each()方法。

您的代码是正确的...但只运行了一次，并将颜色应用于所有元素。

$(document).ready(function(){

  var colors = ['red','blue','green','yellow','cyan','orange'];
  
  $('.color-div').each(function(){
    var new_color = colors[Math.floor(Math.random()*colors.length)];
    $(this).css('background-color',new_color);
  });
 
});  // End ready

div{
  height:2em;
  width: 2em;
}

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

- Louys Patrice Bessette

Answer 2

假设你已经：

• 正确地引入了jQuery
• 至少有一个元素的class是color-div

如果你的代码不起作用，最可能的问题就是没有引入jQuery。请确保使用类似以下内容的方式引用它：

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

以下是一个可行的示例：

$(document).ready(function() {
  var colors = ['red', 'blue', 'green', 'yellow', 'cyan', 'orange'];
  var new_color = colors[Math.floor(Math.random() * colors.length)];
  $('.color-div').css('background-color', new_color);
});

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

更新

以上方法的问题在于，对于每个$('.color-div')元素，'随机'颜色都是相同的。如果有多个匹配的元素，则可能不希望如此。

如果您希望每个元素具有不同的随机颜色，则需要使用.each()来迭代元素，并使用$(this)在循环内部定位元素。还要注意，在循环内部定义new_color。

可以看到以下内容：

$(document).ready(function() {
  var colors = ['red', 'blue', 'green', 'yellow', 'cyan', 'orange'];
  $.each($('.color-div'), function() {
    var new_color = colors[Math.floor(Math.random() * colors.length)];
    $(this).css('background-color', new_color);
  });
});

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

<div class="color-div">Text</div>
<div class="color-div">Text</div>
<div class="color-div">Text</div>
<div class="color-div">Text</div>

- Obsidian Age

---

它可以工作，但每个 div 都是相同的颜色，我希望每个 div 都是随机颜色（例如第一个 div 红色，第二个 div 蓝色，第三个 div 红色），以增加多样性。 - WebStudent

@WebStudent - 对不起，我一开始误解了问题。我已经更新了我的答案来展示每个都是不同的。您可能需要多次点击“运行代码段”来展示随机性 :) - Obsidian Age

Answer 3

你的代码对所有元素使用随机颜色。你需要为每个元素获取一个随机颜色。这意味着需要进行迭代。

以下代码为每个元素获取一个随机颜色：

var colors = ['red','blue','green','yellow','cyan','orange'];
$('.color-div').css('background-color', function() {
    var i = Math.floor(Math.random()*colors.length);
    var color = colors[i];
    colors.splice(i, 1);
    return color;
}); 

上面的代码确保颜色只使用一次。如果允许有两个或更多具有相同颜色的元素，则可以删除colors.splice行。还请注意，带有splice语句的代码假定没有超过6个.color-div元素。

- Ram

---

@WebStudent 非常欢迎！这是上面代码的 jsfiddle：http://jsfiddle.net/9kxL7dau/3/ - Ram

嗯...使用.css()的第二个参数真的很酷！+1 (一个代码片段会更有视觉效果) - Louys Patrice Bessette

Answer 4

一种使用纯粹的原生JavaScript的方法：

你的divs：

<div class="colour-div"></div>
<div class="colour-div"></div>
<div class="colour-div"></div>
<div class="colour-div"></div>
<div class="colour-div"></div>

以下是JS代码：

var colours = ['red','blue','green','yellow','cyan','orange'];
var divs = document.getElementsByClassName("colour-div");

function generateRandomColors() {
    var i;
    for (i = 0; i < divs.length; i++) {
        var newColor = Math.floor(Math.random()*colours.length)
        divs[i].style.backgroundColor = colours[newColor];
    }
}

- user8871181

Answer 5

我会将@ObsidianAge和@LouysPatriceBessette的答案合并，并按照以下方式计算颜色，以便不受您列表的限制...

  var r = Math.random() * 255;
  var g = Math.random() * 255;
  var b = Math.random() * 255;
  var new_color = 'rgb(' + r + ',' g + ',' + b ')';

最终应该得到类似这样的结果：

$(document).ready(function() {
   $('.color-div').each(function(){
      var r = Math.random() * 255;
      var g = Math.random() * 255;
      var b = Math.random() * 255;
      var new_color = 'rgb(' + r + ',' g + ',' + b ')';
      $(this).css('background-color',new_color);
   });
});

https://jsfiddle.net/xpvt214o/689705/

编辑，刚看到你说了，“从选择中”……不好意思，无论如何，把这段代码留在这里可能对某些人有用。

- Erubiel