Response title
This is preview!
- Screen name: Philip Kovachev
Philip Kovachev's Profile
2 Posts
3 Responses
0
Followers
Activity Trend
Last 30 days
- Last 30 days
- Date Interval
From Date : To Date :
Loading Chart...
Show:
- Expanded view
- List view
Private Message
- 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:var masks = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "6.jpg", "7.jpg", "8.jpg", "1.jpg", "2.jpg", "3.jpg", "4.jpg", "6.jpg", "7.jpg", "8.jpg"];for (var i = 0; i < masks.length; i++) {$(".deck").append('<div class="card"> <img class="card" src="./' + masks[i] + '"/></div>');}})Here is the ul that gets populated:<ul class="deck" id="card-deck"><li></li></ul>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 imgif (cardVisible >= 2) $('.card img').hide(); //If 2 or more, hide all$(this).find("img").show(); //Show the image});
- I am populating a div with images from an array that is inside a div with a black background:var masks = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "6.jpg", "7.jpg", "8.jpg", "1.jpg", "2.jpg", "3.jpg", "4.jpg", "6.jpg", "7.jpg", "8.jpg"];$(document).ready(function () {for (var i = 0; i < masks.length; i++) {$(".deck").append('<div onclick="display()" class="card"> <img class="card" src="./' + masks[i] + '"/></div>');}});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?
- «Prev
- Next »
Moderate user : Philip Kovachev