Показать 3 случайных элемента по идентификатору без повторения с помощью JQuery. Как убедиться, что он всегда возвращает 3? И переделать функцию нажатием той же кнопки?

Question

У меня есть код для случайного отображения трех элементов по идентификатору без повторения, что обычно работает. Текущий код отображает три игральные карты, выбранные из 54 карт / элементов HTML. В настоящее время он работает нормально большую часть времени, но иногда он возвращает только две карты, а гораздо реже - только одну. Я хотел бы улучшить его, всегда возвращая три. Как бы я изменил приведенный ниже код для этого?

Кроме того, если я нажимаю кнопку, которая отображает три элемента / карты в случайном порядке дважды или более, он продолжает добавлять три карты при каждом последующем щелчке, пока не будет исчерпано очень много отображений и карт. Как бы я изменил приведенный ниже код так, чтобы он переделывал функцию (случайным образом отображал другой набор из трех карт на своем месте и скрывал первые три из первого клика).

Я хотел бы сохранить функциональность текущего кода выбора элементов по идентификатору, потому что он может быть использован для создания нескольких элементов, отличных от игральных карт.

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 становится короче в каждой раздаче, поэтому вы должны возвращать сданные карты на нее, когда она заканчивается. Теперь это делается внутри getRandom функция.

Вот jsfiddle