按ID顯示3個隨機元素，不使用JQuery重複。如何確保它始終返回3？並重新點擊相同的按鈕功能？

Question

我有一個代碼，通過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); 
}; 

謝謝！

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++){ 
 
\t $(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