のjQuery：ランダム背景色

Question

私は、次の背景色を持っている： #05668D, #028090, #00A896, #02C39A, #F0F3BD ... するとページが読み込まれると、どのように私はクラスabcで各要素を作るのですトップの色の一つに、（ランダム、リピートあり）異なる背景色を持っています。

例：

<div class="asd"><div class="abc">...</div></div> 
<div class="asd"><div class="abc">...</div></div> 
<div class="asd"><div class="abc">...</div></div> 
<div class="asd"><div class="abc">...</div></div> 
<div class="asd"><div class="abc">...</div></div> 

結果：

<div class="asd"><div class="abc" style="background-color:#05668D">...</div></div> 
<div class="asd"><div class="abc" style="background-color:#00A896">...</div></div> 
<div class="asd"><div class="abc" style="background-color:#028090">...</div></div> 
<div class="asd"><div class="abc" style="background-color:#00A896">...</div></div> 
<div class="asd"><div class="abc" style="background-color:#F0F3BD">...</div></div> 
... 

Answer 1

あなたが要素に色を適用するには、以下の1とjQueryの各機能のようなランダム関数を使用することができます。

\t \t $(function(){ 
 
    
 
    function getRandomInt(min, max) { 
 
    return Math.floor(Math.random() * (max - min + 1)) + min; 
 
    }; 
 
    var colors = ['#05668D', '#028090', '#00A896', '#02C39A', '#F0F3BD']; 
 
    $('.abc').each(function(index,el){ 
 
    var randomColorIndex = getRandomInt(0,colors.length-1); 
 
    $(el).css('background-color',colors[randomColorIndex]); 
 
    }); 
 
});

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

あなたは両方ここについて読むことができます。

jqueryの各機能を：https://api.jquery.com/each/

Javascriptをランダム機能：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random

Answer 2

その後、各要素を反復処理する必要がありますそれにbackground-colorスタイルを割り当てます。

平野JavaScriptのバージョン

var colorsArray = ['#05668D', '#028090', '#00A896', '#02C39A', '#F0F3BD']; 
var divsArray = document.getElementsByClassName('abc'); 
var uniqueColorIndex = 0; 

for(var i=0; i < divsArray.length; i++){ 
uniqueColorIndex = Math.floor(Math.random() * (colorsArray.length - 0 + 1)); 
    divsArray[i].style['background-color'] = colorsArray[uniqueColorIndex]; 
}; 

、colorsArrayは、すべての可能なカラーコードを持っています。
uniqueColorIndexは、インデックスの乱数を検出します。 Source

あなたがこれまでに試してみました何jsFiddle