jquery随机颜色foreach div

我的function有这个问题，我试图将一些颜色（预定义）随机化到我的div，并在每次使用颜色时进行计数。

这是我的HTML：

而一些将以随机颜色为背景的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的颜色。 我不知道如何计算每种颜色。

我创造了一个小提琴

Answer 1

我最终得到了这个： http ： //jsfiddle.net/GXVUE/1/

它只是通过class =“stats”将统计数据输出到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('
'); }); })(jQuery); 

Answer 2

为什么不使用包含颜色和使用次数的对象填充数组，而不是仅使用颜色数组。 像这样的东西：

 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 

如果你想变得非常聪明，你可以创建一些会自动跟踪它们的用法的对象：

 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') ]; 

和：

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

而且您不必担心忘记增加使用次数，因为它维持了自己的状态。 您可以使用检索当前值

 myColors[i].getUses();