（如何）我可以 select 数组中的所有元素，除了由 math.random 编辑的随机元素 select 之外？

Question

大家好，我是编程新手，这是我第一次在 Whosebug 上 post，我正在开发一个小游戏，涉及从数组中随机抽取卡片。

像这样想象一个数组：

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

到select随机变量。

现在我想 select 数组中的所有其他变量，并为它们提供以下代码，这样屏幕上一次只会显示一张卡片：

.style.display: "none";

这可能吗？非常感谢！

Answer 1

您可以通过为所有卡片元素分配一个公共 class，然后将 display 样式设置为空或 none 取决于是否匹配：

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

（如何）我可以 select 数组中的所有元素，除了由 math.random 编辑的随机元素 select 之外？

(How) Can I select all elements in an array exept a random an element selected by math.random?

javascript

css

select

display