0

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

以下のコード、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <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)]
        </script>
        <title>Untitled Document</title>
    </head>
    <body>
        <div class="row">
            <div class="sq-color 11"></div>
            <div class="sq-color 12"></div>
            <div class="sq-color 13"></div>
            <div class="sq-color 14"></div>
        </div>
        <div class="row">
            <div class="sq-color 21"></div>
            <div class="sq-color 22"></div>
            <div class="sq-color 23"></div>
            <div class="sq-color 24"></div>
        </div>
        <div class="row">
            <div class="sq-color 31"></div>
            <div class="sq-color 32"></div>
            <div class="sq-color 33"></div>
            <div class="sq-color 34"></div>
        </div>
        <div class="row">
            <div class="sq-color 41"></div>
            <div class="sq-color 42"></div>
            <div class="sq-color 43"></div>
            <div class="sq-color 44"></div>
        </div>
    </body>
</html>

みんな、ありがとう。コードを試し、それに応じて挿入しましたが、変更はありません。.moleクラスで指定された背景画像を表示するDIVはないようです。

以下はコードです。お世辞を言っているところを教えてください。命名規則を修正し、クラス名に文字「c」を追加しました。柔軟性を高めるためだけにクラスを使用しています。

<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>
4

5 に答える 5

1

どうぞ：$("." + random).addClass("someClass");

余談ですが、これらの番号が一意である場合は、セレクターの方が高速であるため、IDを使用する方がよいでしょう。また、これは番号が一意でなければならないことを意味します。注-数値IDは、html5Doctypeでのみ有効です。<!doctype html>

そのセレクターは次のようになります。$("#" + random).addClass("someClass");

于 2012-11-02T01:22:27.413 に答える
0

最終結果が jQuery セレクター プラクティスに関して有効である限り、jQuery セレクター文字列を生成する連結の任意の方法を使用できます。

$('.' + random).addClass('someClass')
于 2012-11-02T01:22:52.107 に答える
0 
$('.'+random).addClass('yourclass');
于 2012-11-02T01:24:36.630 に答える
0

あなたの質問を読んで、あなたが求めているのは、クラスを切り替えて、選択された乱数を表示することだと思います

$(".sq-color " + random).toggleClass("someClass");
于 2012-11-02T01:28:18.330 に答える
0

クラス名/ID に数値だけを使用しないでください。HTML の id 属性に有効な値は何ですか?も参照してください。

于 2012-11-02T01:29:24.650 に答える