0

ユーザーがあるカードの単語を別のカードの定義に一致させる必要がある記憶ゲームを作成しています。

現在、リストにすべてがあり、単語/定義は同じクラス名でリンクされています。

<li class="match1"> 1 </li>
<li class="match2"> Two </li>
<li class="match1"> One </li>
<li class="match2"> 2 </li>

私の質問は、毎回同じ単語を表示させたくないので、ページに表示されるいくつかの異なるクラス名だけをランダムに選択するにはどうすればよいかということです。

たとえば、上記のコードを 50 まで上げたいが、一度に 6 つの異なる単語しか表示したくない場合はどうすればよいでしょうか?

例として「1」と「1」を使用しているだけで、実際には語彙と定義を使用します。

4

1 に答える 1

0

そのクラスの命名規則を継続すると仮定すると-

li { display: none; }すべてのオプションを事前に非表示にするためにaを入力してから、次のようにします。

//Set these as you wish
var totalOptions = 50, showOptions = 6, random;

//Loop this code as many times as the value of showOptions
for (var i = 0; i < showOptions; i++) {

    //Generate a random number between 1 and the value of totalOptions
    do {
        random = 1 + Math.floor(Math.random()*totalOptions);
    }
    //Loop while the chosen value is something already shown
    while (document.getElementsByClassName('match' + random)[0].style.display == 'list-item');

    //Hide word && definition by class name
    document.getElementsByClassName('match' + random)[0].style.display = 'list-item';
    document.getElementsByClassName('match' + random)[1].style.display = 'list-item';

}

フィドル

于 2013-07-09T21:36:36.910 に答える