1

ページのさまざまなセクションに (3 つのパレットから) ランダムな背景色を適用しています。ただし、同じ色が 2 回続けて表示されないようにしたいです。

do whileちょっとしたループがうまくいくと思っていたのですが、見た目ではうまくいきません。

var colours = new Array('#FF5A5A', '#FFBE0D', '#00DDB8');    

var divs = $('.row');
var last;
var next;

// for each section
divs.each(function(i){

    // get a random colour
    do {

        next = Math.floor(Math.random()*3);

        // if it's the same as the last one, try again!
        } while( next === last ) {

            next = Math.floor(Math.random()*3);

        }

        // when it's different to the last one, set it
        $(this).css('background-color', colours[next] );

        // tell it this is the last one now
        next = last;

});

何か案は？

4

4 に答える 4

2

これは一種の構文エラーです。do-while-loop が必要か、通常の while-loop が必要かを判断できませんでしたか? あなたがそこに置いたものは、単純なブロックとして解釈されます:

do {
    next = Math.floor(Math.random()*3);
} while( next === last ) // end of the do-while-loop!
// Block here - the braces could be omitted as well:
{
    next = Math.floor(Math.random()*3);
}
$(this).css('background-color', colours[next] );
…

これにより、前回とは異なる数値が正しく計算されますが、新しい (無制限の) 乱数で上書きされます。また、割り当てnext = last;は、あなたが望むものとは反対のことをします。

スクリプトを次のように変更します

do {
    next = Math.floor(Math.random()*3);
} while( next === last ) // if it's the same as the last one, try again!

// tell it this is the last one now
last = next;

// now that we've made sure it's different from the last one, set it
$(this).css('background-color', colours[next] );
于 2013-10-25T13:01:29.390 に答える
1

改訂- (私は挑戦する気がしたので!) http://jsfiddle.net/6vXZH/2/

var last, colours = ['#ff5a5a', '#ffbe0d', '#00ddb8'];    

$('.row').each(function() {
  var color = colours.splice(~~(Math.random()*colours.length), 1)[0];
  $(this).css('background-color', color);   
  last && colours.push(last), last = color;
});

お役に立てれば！もしよろしければ、実況を教えていただければ幸いです。

小さな配列マジックを使用すると、内部ループは不要になります( http://jsfiddle.net/6vXZH/1/ ) -

var colours = ['#ff5a5a', '#ffbe0d', '#00ddb8'];    
var used = [];

// for each section
$('.row').each(function(i){

  var color = colours.splice(~~(Math.random()*colours.length), 1)[0];
  $(this).css('background-color', color);

  used.push(color);

  if(used.length > 1) {
    colours.push(used.shift());
  }
});
于 2013-10-25T13:10:02.647 に答える
0

関数の前に next と last を定義する方が良いでしょう。

var next=last=Math.floor(Math.random()*3);

$divs.each(function(i){        
    do {
        next = Math.floor(Math.random()*3);
    } while( next === last );  
    $(this).css('background-color', colours[next] );
    next = last;
});
于 2013-10-25T13:05:13.527 に答える
0 
{
var colours     = ['#FF5A5A', '#FFBE0D', '#00DDB8'],
    divs        = $('.row'),
    coloursSize = colours.length,
    last,
    next;


divs.each(function(i){

// get a random colour
    do {
            next = Math.floor( Math.random() * coloursSize );
            // if it's the same as the last one, try again!
        } while( next === last ) 
        // when it's different to the last one, set it
        $(this).css('background-color', colours[next] );
        // tell it this is the last one now
        last = next;

});

}

于 2013-10-25T13:30:42.513 に答える