Question

我正在建立一个网站，我希望页面上的每个div都是以下选项中的一种随机颜色。但是一旦我运行代码，每个div都是相同的颜色。我要去哪里错了？

 $(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);
 });

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>

Answer 2

您的代码对 all 元素使用随机颜色。您需要为每个元素获取随机颜色。这表示迭代。

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

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;
});

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

Answer 3

使用纯香草JavaScript的方法：

您的div：

<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];
    }
}

如果您执行以下操作，脚本将继续正常运行：
-将任意数量的div添加到colour-div类中
-在colours[]

中包含任意数量的颜色

Answer 4

假设您具备以下条件，您的代码将完全按预期运行：

正确包含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>

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/

编辑，只是看到您说的是“来自选择项” ...对不起，无论如何，请将此代码保留在此处，因为它可能对某人有用。

如何为每个div分配随机的背景颜色？

5 个答案:

更新