jQuery Zufallsnummer funktioniert nicht

Question

Ich versuche, jQuery zu generieren, um einen zufälligen Hintergrund auf meiner Website basierend auf einer Zahl zu generieren. Also versuche ich es entweder main1.jpg oder main2.jpg zu erzeugen und es als Hintergrund in den Körper zu werfen.

Aus irgendeinem Grund erzeugt es nur main2.jpg. Hier ist mein Code:

$(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 */ 

}); 

Danke, Wade

Answer 1

Es ist sehr verwirrend zu sehen, was Sie versuchen zu tun. Im Moment versteckst du den Körper zweimal, fügst dann fälschlicherweise eine CSS-Regel hinzu und zeigst dann den Körper. Wenn Sie nur einen zufälligen Hintergrund einstellen möchten, dies tun:

$(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)'}); 
}); 

Wenn Sie einen wollen, sind zufällig hinzufügen zwei divs und zeigen, dies tun:

$(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

Der Grund, es tut, dass der erste Anruf ist überschreibt den Körper Hintergrund der Einstellung der erste. Es ist das Äquivalent zu tun:

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

Was Sie wollen, ist etwas mehr wie:

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

Sie auch dies nur vorladen die ein Bild einstellen können Sie für den Körper Hintergrund verwenden.

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