如何為每個div分配隨機的背景顏色？

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並為每個.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

您的代碼對所有元素使用隨機顏色。 您需要為每個元素獲取隨機顏色。 這意味着迭代 。

以下代碼為每個元素獲取隨機顏色：

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> 

---

UPDATE

上面的問題是，每個$('.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/

編輯 ，只是看到您說的是“來自選擇” ...對不起，無論如何，請將此代碼保留在此處，因為它可能對某人有用。