0

我有一个代码可以通过 id 随机显示三个元素而不重复通常有效。当前代码显示从 54 张卡片/html 元素中选择的三张扑克牌。目前它大部分时间都能正常工作，但有时它只返回两张牌，很少只返回一张。我想通过总是返回三张来改进它。我将如何修改下面的代码来做到这一点？

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

我想保留当前代码按 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);
};

谢谢！

4

1 回答 1

0

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

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每次发牌时数组都会变短，因此当发牌用完时，您应该将发牌归还给它。这现在在getRandom函数内部完成。

这是一个jsfiddle

于 2017-07-17T03:42:44.340 回答