1

私は、16 個の div があり、各 div が 11、12、13... 44 の範囲の一意のクラス名を持つプログラムを作成しています。今、その配列からランダムに数値を選択する数学関数を作成しました。ランダムに選択されたクラス名で div を見つける方法を知りたいので、この div にクラスを追加する必要があります。

新しいクラスが追加されたランダムに選択された div に背景画像 (images.png) が表示されない理由を教えてください。

        <head>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                        <style>
                           .row
                          {
                            width:520px;
                            height:120px;
                            border-color:#333;
                            border-width:1px;
                          }
                           .sq-color
                          {
                            margin: 2px;
                            width:120px;
                            height:120px;
                            float:right;
                            background-color:#6C0;
                          }
                           .mole
                          {
                            background-image:url(images.jpg);
                          }
                   </style>

                    <script>

                           var items = Array(11,12,13,14,21,22,23,24,31,32,33,34,41,42,43,44);
                           var random = items[Math.floor(Math.random()*items.length)]

                           $('.c'+random).addClass('mole');


                   </script>


            <title>Untitled Document</title>
                </head>

                <body>
                    <div class="row">
                          <div class="sq-color c11"></div>
                          <div class="sq-color c12"></div>
                          <div class="sq-color c13"></div>
                          <div class="sq-color c14"></div>
                    </div>
                    <div class="row">
                          <div class="sq-color c21"></div>
                          <div class="sq-color c22"></div>
                          <div class="sq-color c23"></div>
                          <div class="sq-color c24"></div>
                    </div>
                    <div class="row">
                          <div class="sq-color c31"></div>
                          <div class="sq-color c32"></div>
                          <div class="sq-color c33"></div>
                          <div class="sq-color c34"></div>
                    </div>
                    <div class="row">
                          <div class="sq-color c41"></div>
                          <div class="sq-color c42"></div>
                          <div class="sq-color c43"></div>
                          <div class="sq-color c44"></div>
                    </div>
              </body>
  </html>
4

1 に答える 1

0

これを使って：

$(function() {
    var items = Array(11,12,13,14,21,22,23,24,31,32,33,34,41,42,43,44);
    var random = items[Math.floor(Math.random()*items.length)];

    $('.c'+random).addClass('mole');
});

ドキュメントの準備ができたとき。

編集：

jquery ファイルを追加します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

画像確認

$(function() {
    ​var i = new Image();
    i.src = 'images.jpg'​;
    i.onerror = function(e) {
        alert('error on load image');
    };

    var 
        items = Array(11,12,13,14,21,22,23,24,31,32,33,34,41,42,43,44),
        index = Math.floor(Math.random()*items.length), 
        random = items[index];

    $('.c'+random).addClass('mole');
});
于 2012-11-02T03:09:36.860 に答える