jquery隨機顏色foreach div

我有我的功能這個問題，我試圖隨機化一些顏色（預定義）到我的div和計數每次使用顏色。jquery隨機顏色foreach div

這裏是我的html：

<div class="change_color2" id="rand_1"></div> 
<div class="change_color2" id="rand_2"></div> 
<div class="change_color2" id="rand_3"></div> 
<div class="change_color2" id="rand_4"></div> 
<div class="change_color2" id="rand_5"></div>

而且一些div那將不得不爲背景的隨機顏色：

<div class="change_color"></div>

，這是我的js代碼：

function colorfy_me() { 
    var myColors = [ 
     '#543326', '#5EC631', '#A9D7DC', '#003946', '#E0D8C8' 
    ]; 
    shuffleArray(myColors); 
    var i = 1; 
    $('div.change_color').each(function() { 
     $(this).css('background-color', myColors[i]); 
     i = (i + 1) % myColors.length; 
    }); 
}  

function shuffleArray(array) { 
    for (var i = array.length - 1; i > 0; i--) { 
     var j = Math.floor(Math.random() * (i + 1)); 
     var temp = array[i]; 
     array[i] = array[j]; 
     array[j] = temp; 
    } 
    return array; 
}

但問題是，它會隨機更改顏色組中前5個div的顏色。而且我不知道如何計算每種顏色。

我created a fiddle

來源

2013-06-03 Cris Tina

爲什麼要洗牌數組？只需從數組中選取一個隨機顏色即可。你不允許以相同的順序重複相同的顏色嗎？ – crush

我不清楚問題是什麼。你想要什麼不同？ –

您可以計算每種顏色的使用頻率，因爲您正在按順序分配它們。它是#uses = floor（#elements/#colors）+（indexOfColor <#elements％#colors）？ 1：0'。無論是使用「樓層（#elements /＃顏色）」還是「樓層（＃元素/＃顏色）+ 1」時間，都會使用顏色。 –

我結束了這個獲取當前值：http://jsfiddle.net/GXVUE/1/

這只是統計輸出到帶class =「統計」的DIV。

(function($){ 

    var colors = ['#f00', '#0f0', '#00f'] 
    , colorsUsed = {} 
    , $divsToColor = $('.random-color'); 

    $divsToColor.each(function(){ 

    var $div = $(this) 
     , randomColor = colors[ Math.floor(Math.random() * colors.length) ]; 

    $div.css('backgroundColor', randomColor); 

    // Keeps track of how often a color is used... 
    if(colorsUsed[randomColor]){ 
     colorsUsed[randomColor]++; 
    } else { 
     colorsUsed[randomColor] = 1; 
    } 

    }); 

    // This reads through the stats. 
    $('.stats').html(function(){ 
     var out = []; 
     for(var color in colorsUsed){ 
      out.push(color + ' was used ' + colorsUsed[color] + ' times.'); 
     } 
     return out.join('<br>'); 
    }); 

})(jQuery);

來源

2013-06-03 13:06:04

非常感謝Bill！它現在效果很好。 –

就我個人而言，我儘量避免讓兩個並行陣列必須保持同步。將數據封裝在一個對象中更好。 –

我同意，馬特。我更喜歡你的方法，並認爲它更好解釋。我認爲我的選擇只是因爲演示。 =） –

而不是使用的只是顏色數組，爲什麼不填充與包括的顏色和使用次數的對象數組。事情是這樣的：

var myColors = [ 
    { color: '#543326', uses: 0 }, 
    { color: '#5EC631', uses: 0 }, 
    { color: '#A9D7DC', uses: 0 }, 
    { color: '#003946', uses: 0 }, 
    { color: '#E0D8C8', uses: 0 } 
];

然後你可以指定你的顏色是這樣的：

$(this).css('background-color', myColors[i].color);

，並跟蹤你有多少次使用的每種顏色有：

myColors[i].uses++;

如果你不不喜歡寫出對象字面值，你甚至可以創建一個函數，將你的原始顏色數組轉換成對象。

function MakeColorObjects(arrayOfColors) { 
    var objs = []; 
    for (var i=0; i<arrayOfColors.length; i++) { 
     objs.push({ color: arrayOfColors[i], uses: 0 }); 
    } 
    returns objs; 
}

如果你想獲得真正聰明的，你可以創建一個對象，它會自動與這樣的跟蹤它們的用法：

function TrackedColor(colorCode) { 
    var self = this; 
    var uses = 0; 

    function getUses() { 
     return uses; 
    } 

    function getColor() { 
     uses++; 
     return colorCode;  
    } 

    function resetCount { 
     uses = 0; 
    } 
}

現在你可以使用這個像這樣：

var myColors = [ 
    new TrackedColor('#543326'), 
    new TrackedColor('#5EC631'), 
    new TrackedColor('#A9D7DC'), 
    new TrackedColor('#003946'), 
    new TrackedColor('#E0D8C8') 
];

And：

$(this).css('background-color', myColors[i].getColor());

而且您不必擔心忘記增加使用次數，因爲它保持它自己的狀態。你可以用

myColors[i].getUses();

來源

2013-06-03 12:59:02

好吧，我會嘗試這段代碼，讓你知道。非常感謝大家的支持。 –

jquery隨機顏色foreach div

回答

相關問題