（如何）我能否選擇一個數組中的所有元素，而不是隨機選擇math.random選擇的元素？

Question

嗨，大家好，我是編程新手，這是我關於stackoverflow的第一篇文章，我正在開發一個小型游戲，涉及從數組中抽取隨機卡片。

像這樣描繪一個數組：

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);

選擇隨機變量。

現在，我想選擇數組中的所有其他變量，並為他們提供以下代碼，以便一次只在屏幕上顯示一張卡：

.style.display: "none";

這有可能嗎？ 非常感謝！

Answer 1

您可以通過為所有卡片元素分配一個通用類來做到這一點，然后根據其是否匹配將display樣式設置為空或不 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放在文檔末尾，以確保它找到了按鈕（或將事件處理程序綁定到的任何元素）。

Answer 2

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

Answer 3

• 選擇所有卡：
  document.querySelectorAll('#holder .card')

• 選擇一張隨機卡：
  document.querySelector('#holder .card:nth-child(' + (1 + randomNum) + ')')

• 選擇除單個隨機以外的所有卡：
  document.querySelectorAll('#holder .card:not(:nth-child(' + (1 + randomNum) + '))')

要應用樣式，只需遍歷第三個選擇器的結果：
for (var a = cards.length - 1; a >= 0; a--) cards[a].style.display = 'none';