2

下面是我的html代码。这个内容框将取决于内容。我可能是 5 岁、10 岁、20 岁。因为它将是动态内容。现在我想为每个 div 随机添加一个类，类名将是 color-1，color-2，color-3，color-4，color-5，......颜色-10。所以数字范围是1-10。那么我如何在内容框中随机添加这些类。请有任何想法。

HTML：

<div class="content-box">
    <img src="images/love-01.jpg" />
</div>
<div class="content-box">
    <img src="images/love-05.jpg" />
</div>
<div class="content-box">
    <img src="images/love-02.jpg" />
</div>
<div class="content-box">
    <img src="images/love-03.jpg" />
</div>
<div class="content-box">
    <img src="images/love-04.jpg" />
</div>

http://jsfiddle.net/dKgaz/

4

4 回答 4

6 
$('div.content-box').addClass(function(){
    var color = Math.floor(Math.random() * 10) + 1;
    return 'color-' + (color < 10 ? '0' + color : color)
});

JS 小提琴演示。

更新了演示，更明显一点：演示。

于 2013-10-25T07:13:44.580 回答
4

我已经更新了你的 JSFiddle。基本上你想要以下javascript：

$('.content-box').each(function() {
    var number = 1 + Math.floor(Math.random() * 10);
    $(this).addClass("color-" + number.toString());
});

您的 JSFiddle 演示已更新

该$('.content-box').each位选择具有内容框类的每个元素，然后在集合中循环应用括号中的任何内容。在这种情况下Math.random()，为您提供一个介于 0 和 1 之间的数字，我们将其乘以 10 并加 1 得到一个介于 1 和 10 之间的随机数。该Math.floor位确保没有小数位。最后，我们获取该数字并将类“color-[random number]”添加到当前元素。

显然，可能有多个具有相同编号的盒子，因此如果您不想重复，则必须创建一个数组来存储以前的盒子。

于 2013-10-25T07:16:05.163 回答
1

尝试这个：

$('div.content-box').addClass(function(idx){
    return 'color-' + (idx % 10 + 1);
});
于 2013-10-25T07:18:54.097 回答
0

那这个呢：

    function randomInt(min, max) {

        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    $('.content-box').each(function() {

        $(this).addClass('color-' + randomInt(1, 10));
    });

由于都是随机的，可能会生成相同的类，如果您希望类名唯一，请搜索一些数组随机播放方法，随机播放 [1, .. 10] 数组，然后重复添加类

于 2013-10-25T07:20:10.650 回答