使用 JQuery 按 id 不重复显示 3 个随机元素。如何确保它总是returns 3？然后重做点击同一个按钮的功能？

Question

我有一个代码可以按 id 随机显示三个元素而不重复，这通常有效。当前代码显示从 54 cards/html 个元素中选择的三张扑克牌。目前它大部分时间都可以正常工作，但有时它只有 returns 两张牌，而且很少只有 one.I 希望通过始终返回三张来改进它。我将如何修改以下代码来做到这一点？

此外，如果我按下随机显示三个 elements/cards 的按钮两次或更多次，它会在每次后续点击时不断添加三张卡片，直到用完很多显示和卡片。我将如何修改以下代码以重做该功能（随机显示另一组三张卡片并在第一次点击时隐藏前三张）。

我想保留当前代码通过 id 选择元素的功能，因为它可以用于生成除扑克牌之外的其他多个元素。

CSS 设置为：

.cards {
    display: none;
}

代码是：

var myarray = [
"#card1","#card2","#card3","#card4","#card5","#card6","#card7"...];
var numberOfCards = 3;

function getRandom() {
    for (var i = 1; i <= numberOfCards; i++) {
    var randomIndex = RandomDiv();
    $('.cards:eq('+randomIndex+')').fadeIn(900).css('display', 'inline-block');
    myarray.splice(randomIndex, 1);
 }
}
$('.btn').on('click', function() {
    getRandom();
});

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

谢谢！

Answer 1

这是一个没有彻底检修的解决方案：

var myarray = ["#card1","#card2","#card3","#card4","#card5","#card6",
"#card7","#card8","#card9","#card10","#card11","#card12"];
var numberOfCards = 3;
$(".card").hide();

var previous = [];

function getRandom() {

   if(myarray.length<3){
       myarray = ["#card1","#card2","#card3","#card4","#card5","#card6",
              "#card7","#card8","#card9","#card10","#card11","#card12"];
   }
   
   for (var i = 1; i <= numberOfCards; i++) {
       var randomIndex = RandomDiv();
       previous.push(myarray[randomIndex]);
       $(myarray[randomIndex]).fadeIn(900);
       myarray.splice(randomIndex, 1);
   }
};

$('.btn').on('click', function() {
   for(k=0; k< numberOfCards; k++){
 $(previous[k]).hide(0);
   }
   previous = [];
   getRandom();
});

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

.card{
  display: inline-block;
}

.btn{
  border: 1px solid
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn">
Deal
</div>
<div class="card" id ="card1" >1</div>
<div class="card" id ="card2" >2</div>
<div class="card" id ="card3" >3</div>
<div class="card" id ="card4" >4</div>
<div class="card" id ="card5" >5</div>
<div class="card" id ="card6" >6</div>
<div class="card" id ="card7" >7</div>
<div class="card" id ="card8" >8</div>
<div class="card" id ="card9" >9</div>
<div class="card" id ="card10" >10</div>
<div class="card" id ="card11" >11</div>
<div class="card" id ="card12" >12</div>

所有卡片最初都是隐藏的，所以只需要 fadeIn(900)。

请记住，数组 myarray 在每笔交易中都变得越来越短，所以当它用完时，您应该 return 发牌给它。现在这是在 getRandom 函数中完成的。

这是一个jsfiddle

使用 JQuery 按 id 不重复显示 3 个随机元素。如何确保它总是returns 3？然后重做点击同一个按钮的功能？

Display 3 random elements by id with no repeat using JQuery. How to make sure it always returns 3? And redo the function clicking the same button?

jquery

random

shuffle

playing-cards

redo