I have a code that randomly shows three divs with no repeat on click that are selected by their id's. Right now it is being used for playing cards, but I would like to retain it's current functionality of showing the elements by id rather than any other method because it can be repurposed for showing other kinds of elements and images etc. and can be styled in CSS.
Right now the code is working nearly the way I would like it. The only problem is that it shows the cards in the order they are written in html, i.e:
element1, element2, element3...element4, etc.
returning something like:
element9, element27, element48
(for example) when I run the function. I would like the three elements to be generated in random order irrespective of their sequence coded in html, so it would be possible to generate the three divs in a sequence such as
element54, element21, element36
Does someone know how to modify the following code in order to do so?
Jquery:
var myarray = [
"#card1","#card2","#card3","#card4","#card5","#card6","#card7","#card8","#card9","#card10","#card11","#card12","#card13","#card14","#card15","#card16","#card17","#card18","#card19","#card20","#card21","#card22","#card23","#card24","#card25","#card26","#card27","#card28","#card29","#card30","#card31","#card32","#card33","#card34","#card35","#card36","#card37","#card38","#card39","#card40","#card41","#card42","#card43","#card44","#card45","#card46","#card47","#card48","#card49","#card50","#card51","#card52","#card53","#card54"
];
var numberOfCards = 3;
$(".cards").hide();
var previous = [];
function getRandom() {
if(myarray.length<3){
myarray = ["#card1","#card2","#card3","#card4","#card5","#card6","#card7","#card8","#card9","#card10","#card11","#card12","#card13","#card14","#card15","#card16","#card17","#card18","#card19","#card20","#card21","#card22","#card23","#card24","#card25","#card26","#card27","#card28","#card29","#card30","#card31","#card32","#card33","#card34","#card35","#card36","#card37","#card38","#card39","#card40","#card41","#card42","#card43","#card44","#card45","#card46","#card47","#card48","#card49","#card50","#card51","#card52","#card53","#card54"
];
}
for (var i = 1; i <= numberOfCards; i++) {
var randomIndex = RandomDiv();
previous.push(myarray[randomIndex]);
$(myarray[randomIndex]).fadeIn(900).css('display', 'inline-block');
myarray.splice(randomIndex, 1);
}
};
$('.contact-btn').on('click', function() {
for(k=0; k< numberOfCards; k++){
$(previous[k]).hide();
}
previous = [];
getRandom();
});
function RandomDiv() {
return Math.floor(Math.random() * myarray.length);
}
Html (this is just a snippet, the full code goes up to 54 cards):
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" type="text/css" href=style.css>
<script type="text/javascript" src="http://ift.tt/2nYZfvi"></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();" />
CSS:
cards {
display: none;
}
I would also like to keep it fading in at that rate. I know that the code is picking three random cards and displaying them in the order they are written, so I would like any suggestions on changing the code/modifying the function so it shows/generates the three cards/elements in random order as well! Thank you.
Aucun commentaire:
Enregistrer un commentaire