jQuery Случайное число Не работает

Question

Я пытаюсь получить jQuery для генерации случайного фона на моем сайте, основываясь на количестве. Поэтому я пытаюсь заставить его генерировать либо main1.jpg, либо main2.jpg и бросить его в тело в качестве фона.

По какой-то причине он генерирует только 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 */ 

}); 

Спасибо, Wade

Answer 1

Сложно видеть, что вы пытаетесь сделать. Прямо сейчас вы прячете тело дважды, затем неправильно добавляете правило 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)'}); 
}); 

Если вы желаете, чтобы добавить два 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); 
    }); 
}) 

Answer 2

Причина это делает, что это первый вызов установки фона тела перезаписывает первый. Это эквивалентно делать:

var s = "hello"; 
s = "world"; 
alert(s); // world 

То, что вы хотите что-то подобное:

// 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 + ")"); 
}); 

Вы также можете настроить это только поджать одно изображение, которое вы используете для фона тела.

var img = images[Math.floor(Math.random() * images.length)]; 
var preload = $("<img>").attr("src", img); 
$(function() { 
    $("body").css("background", "url(" + img + ")"); 
});