Question

我的功能有这个问题，我试图将一些颜色（预定义）随机化到我的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

Answer 1

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

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

和

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

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

检索当前值

myColors[i].getUses();

Answer 2

我最终得到了这个：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('<br>');
  });

})(jQuery);

jquery随机颜色foreach div

2 个答案: