javascript - リストから大量の要素に css プロパティをランダムに適用する方法はありますか?

Question

より正確には、私が持っている 20 個の div、10 個の背景画像に適用できるので、同じ背景を持つ 2 つの要素がありますか?
ゲームを再現したいのですが、可能かどうかわからないので始めませんでした。裏向きのカードが20枚あります。いずれかをクリックすると、反転して画像が表示されます。しかし、彼らはペアになっています。そのため、2 番目をクリックして画像が一致しないと、元に戻ります。そのため、すべてを一致させるまで、その位置を念頭に置いておく必要があります。最初にめくったものと 2 番目にめくったものの背景画像が同じ場合、それらは表向きのままです。しかし、今のところ、CSS を適用する方法が可能かどうかを知りたいだけです。アイデアは、リロードごとに異なる位置に背景画像を配置することです。

Answer 1

はい。

背景画像ごとに 1 つずつ、10 項目を含む配列を作成します。

var bg_array = [
    'img01.jpg',     //replace property here with URL of your image
    // ... repeat
    'img10.jpg'
];

次に、必要なすべての実際の背景画像 (この場合は 20、または 10 ペア) を含むループを持つ配列を作成します。

var i = bg_array.length,
    tempArray = [];
while (i) {
    i -= 1;
    tempArray.push(bg_array[i]);     // first instance
    tempArray.push(bg_array[i]);     // second instance... makes a pair
}

次に、div をループし、この配列からランダムに選択して、URL をbackgroundImage各 div のプロパティに割り当て、URL のインスタンスを削除tempArrayします。

var divs = document.getElementsByTagName('div'),    // this will capture all divs on the page; you might want to be more specific
    d,
    r;
for (d in divs) {     // assume the variable divs is a collection of all your divs
    r = Math.floor(Math.random() * tempArray.length);     // randomly select number based on size of array
    if (divs[d].style) {     // check the div has a style to change!
        d.style.backgroundImage = 'url("' + tempArray[r] + '")';     // apply randomly selected background image
        tempArray.splice(r, 1);     // remove image URL from tempArray so this won't be used again (remembering tempArray has 2 of each)
    }
}

うまくいけば、このようなものがあなたが必要とすることをするでしょう。

Answer 2

html コードは次のようになります。

<div id="1" class="b1"></div>
<div id="2" class="b1"></div>
<div id="3" class="b2"></div>
<div id="4" class="b2"></div>
<div id="5" class="b3"></div>
<div id="6" class="b3"></div>
<div id="7" class="b4"></div>
<div id="8" class="b4"></div>
<div id="9" class="b5"></div>
<div id="10" class="b5"></div>

そしてCSS：

.b1{background:url(image1.png);}
.b2{background:url(image2.png);}
.b3{background:url(image3.png);}
.b4{background:url(image4.png);}
.b5{background:url(image5.png);}