3

16要素の長さの配列に格納されているID名を16の異なるdivに与える方法を理解しようとしています。

これは、メモリゲームのdivの「配置」をランダム化できるようにするためです。可能な場合はdividとともに変更される8つの異なるdivスタイルがあるためです。

私の計画は、その特定のdivのスタイルと同じ名前をdividに付けることです。

最初のdivのIDとスタイルをmyarray[0]の値として設定し、2番目のdivのIDとスタイルをmyarray [1]として設定する方法はありますか？

編集：

var card = ["orange","orange","pink","pink","red","red","purple","purple",
"blue","blue","green","green","brown","brown","yellow","yellow"];

for(var j, x, i = card.length; i; j = parseInt(Math.random() * i),
x = card[--i], card[i] = card[j], card[j] = x);

その後、体の中でこれを表す何かを達成しようとしています：

<div id="card[0]"></div>
<div id="card[1]"></div>
<div id="card[2]"></div>

等々...

4

4 に答える 4

7

これは、純粋なJavaScriptを使用してクラス名をランダム化するためのソリューションです。

更新された回答

質問が明確になったので、ソリューションを更新しました。これがあなたの色に適合しています。background-colorのを.card配列で設定された色に設定しました。これは、も使用して簡単に行うことができますが、標準に準拠しているかどうかわからないので、文字をid使用しないことをお勧めします。[]id

jsFiddle

ここに画像の説明を入力してください

var colors = [
    "orange","orange","pink","pink","red","red","purple","purple",
    "blue","blue","green","green","brown","brown","yellow","yellow"
];

var divs = document.getElementsByClassName("card");

while (divs.length > 0) {
    var i = Math.floor(Math.random() * colors.length);
    divs[0].style.backgroundColor = colors[i];
    colors.splice(i, 1);
    divs = [].slice.call(divs, 1);
}

元の回答

IDの配列とHTML要素のセットが与えられると、ランダムidがからの各要素に割り当てられidsます。

jsFiddle

ここに画像の説明を入力してください

JavaScript

var ids = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
var divs = document.getElementsByClassName("game-element");

while (divs.length > 0) {
    var i = Math.floor(Math.random() * ids.length);
    divs[0].id = 'item-' + ids[i];
    ids.splice(i, 1);
    divs = [].slice.call(divs, 1);
}

HTML

<div class="game-element"></div>
<div class="game-element"></div>
<div class="game-element"></div>
<div class="game-element"></div>
<div class="game-element"></div>
<div class="game-element"></div>
<div class="game-element"></div>
<div class="game-element"></div>
<div class="game-element"></div>
<div class="game-element"></div>

CSS

.game-element {
    width:10px;
    height:10px;
    float:left;
}

#item-1  { background-color:#F00; }
#item-2  { background-color:#0F0; }
#item-3  { background-color:#00F; }
#item-4  { background-color:#FF0; }
#item-5  { background-color:#F0F; }
#item-6  { background-color:#0FF; }
#item-7  { background-color:#A0A; }
#item-8  { background-color:#0AA; }
#item-9  { background-color:#AA0; }
#item-10 { background-color:#000; }
于 2013-03-23T14:01:06.213 に答える
2

各divにrandomdivクラスなどを割り当てます。これにより、他のdivに影響を与えることなく、必要なものを選択できるようになります。

その後、これを行うことができます

var idArr = [/**random ids here**/];
$( ".randomdiv" ).each(function( index ) {
  $(this).attr("id",idArr[index]);
});

それはクラスですべてのdivをループし、あなたが望むように定義できるrandomdiv値をそれに割り当てidArrます、私はあなたのユースケースのためのある種のランダム化関数で推測します

アップデート

質問に対するあなたの更新で、私は問題を見ています。設定する一意でないIDがあります。IDは一意である必要があります。それらの複数を同じに割り当てたい場合は、クラスを使用します。したがって、コードは代わりに次のようになります

var card = ["orange","orange","pink","pink","red","red","purple","purple",

"青"、 "青"、 "緑"、 "緑"、 "茶色"、 "茶色"、 "黄色"、"黄色"]; $（ ".randomdiv"）.each（function（index）{$（this）.addClass（card [index]）;}）;

そして、あなたはこのようなcssであなたが望むスタイルを定義することができます

.randomdiv.blue{
  background-color:blue;
}

.randomdiv.green{
  background-color:green;
}
...
于 2013-03-23T13:48:26.650 に答える
1

自分が何を求めているのかを正確に知るのは難しいですが、jQueryを使用している場合は、次のようなことができます。

HTML：

<div class="random"></div>
<div class="random"></div>
<div class="random"></div>

JavaScript：

var myarray = ["one","two","three"];    

// loop through all divs
$('div.random').each(function(index) {

    // set div id to array value
    $('div').attr('id', myarray[index]);

});

結果：

<div class="random" id="one"></div>
<div class="random" id="two"></div>
<div class="random" id="three"></div>

追加コメント：

配列の長さが要素の数と等しいことを確認するか、少なくとも確認する価値がdivあります。そうしないと、例外が発生する可能性があります。

于 2013-03-23T13:48:39.277 に答える
-1

ページはサーバー側またはクライアント側のいずれかでレンダリングできます

1）サーバー側では、サーバー側の言語（C＃など）とフレームワーク（ASP.NETなど）を使用するとはるかに簡単になります

2）クライアント側では、任意のJavaScriptテンプレート（アンダースコアテンプレートなど）に基づいてDOMを生成し、配列をデータモデルとして渡すことでレンダリングできます）アンダースコアテンプレートメソッドを参照できます：http：//underscorejs.org/#template

編集

サーバー側の例（例としてC＃とMVC razorビューを使用しますが、他の言語とWebサーバーを使用する場合も同じ考えになる可能性があります）。

@{ ids = ... }
@foreach (var id in ids) 
{
  <div id="@id"></div>
}

このコードは、定義したIDでdivを生成するのに役立ちます。

クライアント側（私はアンダースコアテンプレートを使用しますが、他のエンジンを使用する場合も同じ考えです）

var list = "_.each(ids, function(id) {<div id='<%id%>'></div>});";
_.template(list, {ids: ['id1', 'id2', 'id3']});

これにより、リストされたIDで3つのdivが生成されます。

アップデート

最初にdivを生成してからそのIDを変更するよりも、divを生成するときにIDを生成する方が適切です。

于 2013-03-23T13:49:20.277 に答える