1

関数にこの問題があり、いくつかの色 (定義済み) を 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 の色がランダムに変わることです。また、各色の数え方もわかりません。

フィドルを作成しました

4

2 に答える 2

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();
于 2013-06-03T12:59:02.283 に答える
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('<br>');
  });

})(jQuery);
于 2013-06-03T13:06:04.813 に答える