jQuery 随机数不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2304414/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Random Number Not Working
提问by Wade D Ouellet
I am trying to get jQuery to generate a random background on my site body based off a number. So I'm trying to get it to generate either main1.jpg or main2.jpg and throw it into the body as a background.
我试图让 jQuery 根据一个数字在我的网站正文上生成一个随机背景。所以我试图让它生成 main1.jpg 或 main2.jpg 并将其作为背景扔到正文中。
For some reason it is only generating main2.jpg. Here is my code:
出于某种原因，它只生成 main2.jpg。这是我的代码：
$(document).ready(function(){
$("body").css({'background' : 'url(images/main1.jpg)'}).hide();
$("body").css({'background' : 'url(images/main2.jpg)'}).hide();
var randomNum = Math.floor(Math.random()*2); /* Pick random number */
$("body").css({'background' : 'url(images/main:eq(' + randomNum + ').jpg)'}).show(); /* Select div with random number */
});
Thanks, Wade
谢谢，韦德
回答by Doug Neiner
It is very confusing to see what you are trying to do. Right now you are hiding the body twice, then incorrectly adding a css rule, then showing the body. If you just want to set a random background, do this:
看到您正在尝试做的事情非常令人困惑。现在您将主体隐藏了两次，然后错误地添加了 css 规则，然后显示了主体。如果您只想设置随机背景，请执行以下操作：
$(document).ready(function(){
var randomNum = Math.ceil(Math.random()*2); /* Pick random number between 1 and 2 */
$("body").css({'background' : 'url(images/main' + randomNum + '.jpg)'});
});
If you are wanting to add two divsand show one randomly, do this:
如果您想添加两个divs并随机显示一个，请执行以下操作：
$(document).ready(function(){
/* Pick random number between 1 and 2 */
var randomNum = Math.ceil(Math.random()*2);
$.each([1,2], function(){
var $div = $('<div class="background" style="background-image: url(images/main' + this + '.jpg)"></div>');
if( this !== randomNum ) $div.hide();
$div.appendTo( document.body );
});
})
回答by cletus
The reason it's doing that is the first call to setting the body background overwrites the first. It's the equivalent of doing:
这样做的原因是第一次调用设置主体背景会覆盖第一个。这相当于做：
var s = "hello";
s = "world";
alert(s); // world
What you want is something more like:
你想要的是更像：
// this can contain as many images as you want
var images = ["images/main1.jpg", "images/main2.jpg"];
// preload. This is optional
var preload = new Array(images.length);
for (var i=0; i<images.length; i++) {
preload[i] = $("<img>").("src", images[i]);
}
// assign one randomly
$(function() {
var img = images[Math.floor(Math.random() * images.length)];
$("body").css("background", "url(" + img + ")");
});
You could also adjust this to only preload the one image you use for the body background.
您也可以调整它以仅预加载用于身体背景的一张图像。
var img = images[Math.floor(Math.random() * images.length)];
var preload = $("<img>").attr("src", img);
$(function() {
$("body").css("background", "url(" + img + ")");
});
