0

こんにちは皆さん、私はプログラミングの初心者で、これがスタックオーバーフローに関する最初の投稿です。配列からランダムなカードを引き出す小さなゲームに取り組んでいます。

次のような配列を想像してください。

var cards = [document.getElementById("c1"),
         document.getElementById("2"),
         document.getElementById("3"),
         document.getElementById("4"),
        ];

これで、配列から確率変数を生成する次のコードができました。

var randomNum = Math.floor((Math.random() * cards.length));

私が使う：

document.getElementById(randomNum);

確率変数を選択します。

ここで、配列内の他のすべての変数を選択し、次のコードを指定して、一度に 1 つのカードのみが画面に表示されるようにします。

.style.display: "none";

これは可能ですか？どうもありがとう！

4

3 に答える 3

0

すべてのカード要素に共通のクラスを割り当て、一致するかどうかに応じてdisplayスタイルを空またはなしに設定することで、これを最もうまく行うことができます。

document.getElementById('btn_rnd').addEventListener('click', function () {
    // get array of elements that have the "card" class:
    var cards = document.querySelectorAll('.card');
    // pick a random number:
    var randomNum = Math.floor((Math.random() * cards.length));
    // show only that card:
    for (var i = 0; i < cards.length; i++) {
        cards[i].style.display = (i == randomNum ? '' : 'none');
    }
});
<div id="c1" class="card">card 1</div>
<div id="c2" class="card">card 2</div>
<div id="c3" class="card">card 3</div>
<div id="c4" class="card">card 4</div>
<button id="btn_rnd">pick one randomly</button>

上記は、ボタンを押した後にランダムに選択します。

このボタン クリックのようなイベント ハンドラーを定義する場合は、その JavaScript をドキュメントの末尾近くに配置して、ボタン (またはイベント ハンドラーをバインドする要素) が確実に検出されるようにします。

于 2015-12-26T20:50:20.870 に答える
0

HTML :

<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>

<button id="play">Play !</button>

CSS :

.card {
  height: 50px;
  width: 50px;
  background-color: red;
  margin: 5px;
}

div {
  display: none;
}

純粋な Javascript を使用する:

(function() {

  var cards = document.getElementsByClassName('card');

  var play = document.getElementById('play');

  play.addEventListener('click', function() {
    cards[Math.round(Math.random() * 3)].style.display = 'block';
  });

})();

JQuery の使用:

$(document).ready(function() {
    $('#play').click(function() {
    var card = $('.card').get(Math.round(Math.random() * 3));
    $(card).show();
  });
});

JSFiddle

于 2015-12-26T20:58:54.073 に答える
0

  • すべてのカードを選択する:
    document.querySelectorAll('#holder .card')

  • 1 枚のランダム カードを選択する:
    document.querySelector('#holder .card:nth-child(' + (1 + randomNum) + ')')

  • 1 つのランダムを除くすべてのカードを選択する:
    document.querySelectorAll('#holder .card:not(:nth-child(' + (1 + randomNum) + '))')

スタイルを適用するには、3 番目のセレクターの結果をループするだけです。
for (var a = cards.length - 1; a >= 0; a--) cards[a].style.display = 'none';

于 2015-12-26T21:00:43.050 に答える