2

以下は私のhtmlコードです。このコンテンツボックスはコンテンツによって異なります。私は5歳、10歳、20歳かもしれません。動的コンテンツになるためです。今、各 div にランダムにもう 1 つのクラスを追加したいと思います。クラス名は、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 フィドルのデモ。

もう少しわかりやすいように、デモを更新しました: demo。

于 2013-10-25T07:13:44.580 に答える
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] 配列をシャッフルし、addClass を繰り返します。

于 2013-10-25T07:20:10.650 に答える