[英]jQuery random array number different from the last
I'm applying a random background colour (from a palette of 3) to different sections of a page. 我正在应用随机背景颜色(从3的调色板)到页面的不同部分。 However, I want to make sure that the same colour doesn't appear twice in a row.
但是,我想确保相同的颜色不会连续出现两次。
I thought a little do
while
loop would work, but it's not quite there by the looks of it. 我想稍微
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;
});
Any ideas? 有任何想法吗?
That's kind of a syntax error - you couldn't decide whether you want a do-while-loop or a normal while-loop? 这是一种语法错误 - 你无法决定你是想要一个do-while-loop还是一个普通的while循环? What you put there is going to be interpreted as a simple block :
你放在那里将被解释为一个简单的块 :
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] );
…
This will correctly compute a different number than the last, but then it will overwrite it with a new (unrestricted) random number. 这将正确计算与最后一个不同的数字,但随后它将使用新的(不受限制的)随机数覆盖它。 Also, the assignment
next = last;
另外,赋值
next = last;
does the opposite of what you want. 与你想要的相反。
So change your script to 所以将脚本更改为
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] );
Revised - (because I felt up to the challenge!) http://jsfiddle.net/6vXZH/2/ 修改 - (因为我感觉到了挑战!) 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;
});
Hope this helps! 希望这可以帮助! I'd be happy to give you the play-by-play if you'd like it.
如果您愿意的话,我很乐意为您提供游戏。
Using a little array magic, no inner loops necessary ( http://jsfiddle.net/6vXZH/1/ ) - 使用一个小阵列魔法, 不需要内部循环 ( 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());
}
});
Defining next and last before the function will be better. 在函数之前定义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;
});
{
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;
});
} }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.