Question

我正在创建一个记忆游戏，用户必须将一张卡上的单词与另一张卡上的单词匹配。

目前，我在列表中包含所有内容，并且单词/ defintion通过相同的类名链接在一起。

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

我的问题是，由于我不希望每次都出现相同的单词，我将如何随机选择几个不同的类名出现在页面上，以及更多。

例如，如果我想让上面的代码达到50，但一次只显示6个不同的单词？

我只是使用“1”和“one”作为例子，如果重要的话，我实际上会使用词汇和定义。

Answer 1

假设您继续使用该类命名约定 -

使用li { display: none; }预先隐藏所有选项，然后：

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

}

Fiddle

随机选择固定数量的列表项？

1 个答案: