I am trying to make a matching card game to become better in js in which when you open two cards that match they disappear from the deck. I am populating a ul with the images from an array like so:
When you click on two of them, they get displayed and stay opened until you click elsewhere, I want to make them disappear if they match if not they should close, how can that be achieved? What is the right way to approach and do this? I know I have to make each card unique for starters and probably store them in another array, but I dont know how to do that since they are generated dynamically.
Here is the function that hides and shows them:
$(document).ready(function () {
$(".deck").on('click', '.card', function () {
var cardVisible = $('.card img:visible').length; //Get the number of visible img
if (cardVisible >= 2) $('.card img').hide(); //If 2 or more, hide all
the img tag has a css code added to it display:none so that it is hidden, I am trying to make each black square show its image when clicked on but it dosen't work:
function display() {
$("img").removeAttr("display");
}
How can I achieve that? I also need to keep a card open with the image on until another one is clicked on. Will I achieve better results if I use toggle?