jQuery Nombre aléatoire ne fonctionne pas

Question

J'essaie d'obtenir jQuery pour générer un arrière-plan aléatoire sur mon corps de site basé sur un nombre. Donc j'essaye de l'obtenir pour générer soit main1.jpg ou main2.jpg et le jeter dans le corps comme arrière-plan.

Pour une raison quelconque, il génère uniquement main2.jpg. Voici mon 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 */ 

}); 

Merci, Wade

Answer 1

Il est très déroutant de voir ce que vous essayez de faire. En ce moment, vous cachez deux fois le corps, puis vous ajoutez incorrectement une règle css, puis vous montrez le corps. Si vous voulez juste définir un arrière-plan aléatoire, faites ceci:

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

Si vous êtes désireux d'ajouter deux divs et montrer un hasard, faites ceci:

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

La raison pour laquelle il est en train de faire est que le premier appel à la mise en l'arrière-plan du corps écrasez la première. Il est l'équivalent de faire:

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

Ce que vous voulez est quelque chose comme:

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

Vous pouvez également régler cela ne précharger une image que vous utilisez pour l'arrière-plan du corps.

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