将随机类添加到 div答案

【问题标题】：Adding random class to the div将随机类添加到 div
【发布时间】：2012-10-26 04:27:18
【问题描述】：

目前在我的游戏中，当它完成时，一个随机图像被传递到“显示包装器”以在最后显示。

我仍然想这样做，但我不想这样做，而是每次都向“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 + '")'));
});

有什么想法可以添加一个随机类吗？

【问题讨论】：

标签： javascript jquery random

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

因为您已经有了随机数，并且您的图像具有相同的文件名结构（image1、image2 等）

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

【讨论】：

【解决方案3】：

Rory 有一个很好的解决方案，但如果你很好奇，这里有一些更通用的方法：

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

向函数传递一个类字符串数组和你想要类的元素，你就可以开始了。

【讨论】：