将随机类添加到div

时间:2012-11-06 08:40:11

标签: javascript jquery random

在我的游戏中,当它完成时,随机图像被传递到“揭示包装”以在最后显示。

我仍然希望这样做,但不是这样做,而是每次都要在“revael-wrapper”中添加一个随机类,以使其成为“.reveal-wrapper .image1”。将有5个不同的图像,我希望它每次随机选择一个。

目前的代码如下:

$(document).ready(function () {
    bgImageTotal = 5;
    randomNumber = Math.round(Math.random() * (bgImageTotal - 1)) + 1;
    imgPath = ('images/reward-images/' + randomNumber + '.png');
    $('.reveal-wrapper').css('background-image', ('url("' + imgPath + '")'));
});

我是如何添加随机类的?

3 个答案:

答案 0 :(得分:4)

你已经有了逻辑,你只需要添加这个类。试试这个:

$(document).ready(function () {
    bgImageTotal = 5;
    randomNumber = Math.round(Math.random() * (bgImageTotal - 1)) + 1;
    $('.reveal-wrapper').addClass('image' + randomNumber);
});

您需要做的就是在CSS中设置类:

.image1 { background-image: url('images/reward-images/1.png'); }
.image2 { background-image: url('images/reward-images/2.png'); }
.image3 { background-image: url('images/reward-images/3.png'); }
.image4 { background-image: url('images/reward-images/4.png'); }
.image5 { background-image: url('images/reward-images/5.png'); }

答案 1 :(得分:0)

由于您已经拥有随机数,并且您的图像具有相同的文件名结构(image1,image2等)

$('.reveal-wrapper').addClass('image' + randomNumber);

答案 2 :(得分:0)

罗里有一个很好的解决方案,但如果你对此感到好奇,那就更通用了:

function add_rand_class (classes, elem) {
  $(elem).addClass(classes[Math.random() * classes.length >> 0]);
}

传递一个类字符串数组和你想要类的元素,你就可以了。