Question

我想展示三张在HTML和CSS中随机创建和设置的扑克牌而不重复。基本上我希望这些卡片可以通过id随机选择并显示出来。我知道还有其他方法可以做到这一点（即在Javascript中创建套牌本身）但是我更愿意找到一种方法来使用Javascript来显示HTML的元素，因为它可以被重新用于显示其他风格的html元素css喜欢图像，文本或任何ID一次三个，或者一次更多的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);    
};

Answer 1

您可以尝试这样的事情

var myarray =  $(".cards")

将正确抓取元素。

提供所有卡

display: none;

css并在需要时显示它们。

Answer 2

您只是附加卡阵列中的文字。你想要的是

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

Answer 3

您只追加来自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数组，因此你必须在$('.card').append($(getUnique(3)))

这样的单个语句中附加这些id。

Answer 4

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

＆＃13;

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}
}

＆＃13;

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

＆＃13;

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

如何通过id随机显示三个div而不重复？对于扑克牌洗牌机和其他

4 个答案: