Случайное число jQuery не работает - PullRequest
Новая
       15

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

8 голосов
/ 21 февраля 2010

Я пытаюсь заставить 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

Ответы [ 2 ]

19 голосов
/ 21 февраля 2010

Очень сложно увидеть, что вы пытаетесь сделать. Прямо сейчас вы дважды скрываете тело, затем неправильно добавляете правило 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 );
    });
})
4 голосов
/ 21 февраля 2010

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

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