如何按id随机显示三个div而不重复？用于扑克牌洗牌机等答案

【问题标题】：How do I show three divs by id randomly without repeat? For playing card shuffler and else如何按id随机显示三个div而不重复？用于扑克牌洗牌机等
【发布时间】：2017-07-10 04:12:12
【问题描述】：

我想展示三张用 HTML 和 CSS 随机创建和设置样式的扑克牌，不重复。基本上我希望卡片由 id 随机选择并显示。我知道还有其他方法可以做到这一点（即在 Javascript 中创建卡片组本身），但我更愿意找到一种方法来使用 Javascript 通过 id 显示 HTML 的元素，因为它可以重新用于显示其他样式的 html 元素css，例如图像、文本或任何具有 ID 的内容，一次三个，甚至更多。我也希望这是一个 onclick 事件。

使用下面的代码，我尝试将 id 放在一个数组中，但是当我运行代码时，括号内的文本显示在页面上，而不是 id 元素本身。这也发生在加载而不是点击时。请注意，代码中的省略号不在代码中，它们只是用来表示其余元素。我已经做了一些彻底的研究，试图找到一种方法来做到这一点，尝试了很多方法，但还没有找到一种方法来一次显示多个元素（大多数看到的例子使用 getElementById 方法，它只适用于一个）。我见过的用于多个显示数组中的文本元素的方法。有没有人知道如何使代码按照我指定的方式工作，或者另一种想法？

HTML：

<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>
    <link rel="stylesheet" type="text/css" href=style.css>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type"text/javascript" src="js/main.js"></script>
  </head>
    <div class="card">
      <div style="font-size: 24px" style="display; inline-block">       
        <div class="cards" id="card1"><span style="color: #C23B22">2♦</span></div>
        <div class="cards" id="card2"><span style="color: #C23B22">2♥</span></div>
        <div class="cards"id="card3">2♣</div>
        <div class="cards" id="car4">2♠</div>
        <div class="cards" id="card5"><span style="color: #C23B22">3♦</span></div>
        <div class="cards" id="card6"><span style="color: #C23B22">3♥</span></div>
        <div class="cards" id="card7">3♠</div>
        <div class="cards" id="card8">3♣</div>
        <div class="cards" id="card9"><span style="color: #C23B22">4♦</span></div>
        <div class="cards" id="card10"><span style="color:#C23B22">4♥</span></div>
        <div class="cards" id="card11">4♣</div>
        <div class="cards" id="card12">4♠</div>
        <div class="cards" id="card13"><span style="color:#C23B22">5♦</span></div>
        <div class="cards" id="card14"><span style="color:#C23B22">5♥</span></div>
        <div class="cards" id="card15">5♣</div>
        ...
      </div>
    </div>
    <input type="button" id="Button" value="Random" onclick="RandomDiv();" />
  </body>
</html>

Javascript/Jquery：

var myarray = ["card1","card2","card3","card4","card5","card6","card7","card8","card9","card10","card11","card12","card13","card14","card15"...];

var numberOfTestimonials = 3;

for (var i=1; i<=numberOfTestimonials; i++) {
  var randomIndex = RandomDiv(myarray);

  $('.card').append(myarray[randomIndex]);
  myarray.splice(randomIndex, 1);
}

function RandomDiv(myarray) {
  return Math.floor(Math.random() * myarray.length);    
};

【问题讨论】：

见Random number, which is not equal to the previous number
首先您的 span 元素没有正确关闭，因为它们没有右括号“>”。其次，您使用的 append 方法不用于插入文本。您应该首先使用 $(selector) 选择具有指定 id 的项目。然后附加它。

标签： javascript jquery html arrays random

【解决方案1】：

您仅附加来自myarray index 的文本，使用下面的行附加元素，例如，

$('.card').append($('#' + myarray[randomIndex]));

片段，

var myarray = ["card1", "card2", "card3", "card4", "card5", "card6", "card7", "card8", "card9", "card10", "card11", "card12", "card13", "card14", "card15"];
var numberOfTestimonials = 3;

function getRandom() {
  for (var i = 1; i <= numberOfTestimonials; i++) {
    var randomIndex = RandomDiv();
    $('.card').append($('#' + myarray[randomIndex]));
    myarray.splice(randomIndex, 1);
  }
}
$('#Button').on('click', function() {
  getRandom();
});

function RandomDiv() {
  return Math.floor(Math.random() * myarray.length);
}

.cards {
  display: inline-block;
  margin: 5px
}

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="card">
  <div style="font-size: 24px" style="display; inline-block">
    <div class="cards" id="card1"><span style="color: #C23B22">2♦</span></div>
    <div class="cards" id="card2"><span style="color: #C23B22">2♥</span></div>
    <div class="cards" id="card3">2♣</div>
    <div class="cards" id="car4">2♠</div>
    <div class="cards" id="card5"><span style="color: #C23B22">3♦</span></div>
    <div class="cards" id="card6"><span style="color: #C23B22">3♥</span></div>
    <div class="cards" id="card7">3♠</div>
    <div class="cards" id="card8">3♣</div>
    <div class="cards" id="card9"><span style="color: #C23B22">4♦</span></div>
    <div class="cards" id="card10"><span style="color:#C23B22">4♥</span></div>
    <div class="cards" id="card11">4♣</div>
    <div class="cards" id="card12">4♠</div>
    <div class="cards" id="card13"><span style="color:#C23B22">5♦</span></div>
    <div class="cards" id="card14"><span style="color:#C23B22">5♥</span></div>
    <div class="cards" id="card15">5♣</div>
  </div>
</div>
<input type="button" id="Button" value="Random" />

此外，您可以通过添加 # 并使用 @Jeremy 回答的 getUnique() 来制作卡片阵列。 getUnique() 将返回一个 id 数组，因此您只需将这些 id 附加到单个语句中，例如 $('.card').append($(getUnique(3)))

【讨论】：

好的，非常感谢。我应该包括我的 css，它的卡片位于“显示：无”。上面的代码的工作原理是从数组中选择三张卡片。但它只有在我已经显示所有卡片时才有效（即“显示：内联块”）。是否可以修改上面的代码，以便我从显示的 0 个元素变为单击时显示的三个元素？
是的，将所有 cards 隐藏起来，就像 $('.cards').hide() 一样，然后只显示 3 张随机卡片。
我会把它放在代码行的什么地方？单独或在函数内保持元素隐藏并且在点击时不显示。
在getRandom函数function getRandom() { $('.cards').hide(); for(...){...SHOW CARDS ELEMENTS HERE...} }
我试过`function getRandom() { $('.cards').hide(); for (var i = 1; i for (...) 是指引用上面的代码对吗？ `{...SHOW CARDS ELEMENTS HERE...} 是否表示所有 ID 元素，它在代码行中的位置是什么？我已经尝试了几件事。完整的函数应该怎么看？

【解决方案2】：

你可以试试这样的

var myarray =  $(".cards")

这将正确地抓取元素。

给你所有的卡片

display: none;

css 并在需要时让它们出现。

【讨论】：

【解决方案3】：

您只是从卡片数组中附加文本。你想要的是

$('.card').append(document.getElementById( myarray[randomIndex]));

【讨论】：

好棒！我很高兴地说这行得通，出于某种原因，我认为getElementById 只能得到一个元素。但是，所有元素在 css 中都设置为 display: none，因此除非附加，否则它们不会显示。附加元素不会改变这一点（即三个随机元素不会像数组中的文本之前那样显示）。你知道修改函数的方法（或另一种方法），使三张随机随机卡（并且只有三张随机卡）从display: none 显示（最好是display; inline-block？

【解决方案4】：

在这里，我修复了您的代码：

var symbols = ['&spades;','&clubs;','&hearts;','&diams;'];
function RandomDiv() {
	for (i=1; i <= 15; i++) {
    document.getElementById('card' + i).innerHTML = random(10, 2) + symbols[random(3, 0)];
    document.getElementById('card' + i).style.color = randomColor('#C23B22', 'black');
  }
}

function random(max, min) {
var x = Math.floor((Math.random() * max) + min);
    return x;
}
function randomColor(color1, color2) {
  if (random(2, 1) == 1) {
    return color1;
  } else {return color2}
}

<div style="font-size: 24px; display: inline-block">
<div class="cards" id="card1">2♦</div>
<div class="cards" id="card2">2♥</div>
<div class="cards" id="card3">2♣</div>
<div class="cards" id="card4">2♠</div>
<div class="cards" id="card5">3♦</div>
<div class="cards" id="card6">3♥</div>
<div class="cards" id="card7">3♠</div>
<div class="cards" id="card8">3♣</div>
<div class="cards" id="card9">4♦</div>
<div class="cards" id="card10">4♥</div>
<div class="cards" id="card11">4♣</div>
<div class="cards" id="card12">4♠</div>
<div class="cards" id="card13">5♦</div>
<div class="cards" id="card14">5♥</div>
<div class="cards" id="card15">5♣</div>
</div>
<br>
<button onclick="RandomDiv();">Random</button>

Codepen：https://codepen.io/anon/pen/gRQOOY
如果您有任何问题，请随时提出！

【讨论】：