Adding a class to an array of divs after a certain condition is met

Question

I'm trying to make a memory game more like mahjong. I've already completed most of it.

But the problem I'm facing is after selecting two divs/cards if they do not match they are not flipping back.

I tried to do this with an if/else statement where the selected divs are stored in a variable (in array form). But the flipping is happening to their parent div. So I used parent() to go to the parent div and add "isFlipped" class if they do not match. But it isn't working. I also tried to use map() to the variable where the selected divs are stored. It isn't working either. here's my code

 //shuffle position of cards $.fn.shuffleChildren = function () { $.each(this.get(), function (index, el) { var $el = $(el); var $find = $el.children(); $find.sort(function () { return 0.5 - Math.random(); }); $el.empty(); $find.appendTo($el); }); }; $(".parent1").shuffleChildren(); $(".parent2").shuffleChildren(); var counter = 3; var attempt = document.getElementById("count"); attempt.innerHTML = "You've " + counter + " lives"; var inner = $(".inner"); function hideCards() { inner.addClass("isFlipped"); inner.click(function () { var elem = $(this); //returns inner div elem.toggleClass("isFlipped"); var child = elem.find(".front").children(); //returns block class //var first = child.attr("data-type"); //returns data-type of the block class if (child.hasClass("matched")) { return; } child.toggleClass("selected"); child.siblings(".selected").removeClass("selected"); var selected = $("[data-type].selected"); if (selected.length === 2) { var type1 = selected.eq(0).data("type"); var type2 = selected.eq(1).data("type"); var isMatch = type1 === type2; if (isMatch) { selected.removeClass("selected").toggleClass("matched", isMatch, 2000); attempt.innerHTML = "You've " + counter + " lives"; } else { selected.removeClass("selected"); var inr = selected.parent().parent(); console.log(inr); inr.map(function(element) { $(element).addClass("isFlipped"); }); counter -= 1; if (counter == 0) { attempt.innerHTML = "GAME OVER!!"; } else { attempt.innerHTML = "You've " + counter + " lives"; } } } }) } setTimeout(hideCards, 5000);

 @import url("https://fonts.googleapis.com/css?family=Merriweather:400,400i,700"); .parent1, .parent2 { height: 100px; width: 100%; border: 1px solid grey; overflow: hidden; display: flex; } .parent1 div, .parent2 div { flex-basis: 100%; } .block1, .block2 { height: 100px; color: white; font-size: 30px; display: flex; justify-content: center; align-items: center; font-family: Merriweather, serif; } [data-type].selected, [data-type].selected:hover { border: 3px solid white; } [data-type].matched { display: none; } [data-type]:hover { border: 1px solid #000; } [data-type="c1"] { background-color: #F44336; } [data-type="c2"] { background-color: #E91E63; } [data-type="c3"] { background-color: #8E24AA; } [data-type="c4"] { background-color: #5E35B1; } [data-type="c5"] { background-color: #1E88E5; } [data-type="c6"] { background-color: #00796B; } [data-type="c7"] { background-color: #AFB42B; } [data-type="c8"] { background-color: #FF8F00; } .gameover { width: 100%; height: 100vh; background-color: coral; position: absolute; top: 0; left: 0; font-family: 'Press Start 2P', cursive; text-align: center; display: flex; justify-content: center; align-items: center; display: none; } .buttons { margin: auto; } .buttons a { text-decoration: none; font-size: 30px; color: #fff; } .gameover h1 { font-size: 40px; } /* FLIP CARD */ .flip { width: 300px; height: 200px; background-color: transparent; border: 1px solid #f1f1f1; } .inner { position: relative; width: 100%; height: 100%; transition: transform 0.8s; transform-style: preserve-3d; } /* .flip:hover .inner { transform: rotateY(180deg); } */ .front, .back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; } .front { background-color: pink; } .back { background-color: skyblue; transform: rotateY(180deg); } .inner.isFlipped { transform: rotateY(180deg); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> </head> <body> <div class="gameover"> <div class="content"> <h1>GAME OVER!!</h1> <div class="buttons"> <a href="">Retry</a> </div> </div> </div> <div class="main"> <div class="parent1"> <div class="flip"> <div class="inner"> <div class="front"> <div class="block1" data-type="c1">1</div> </div> <div class="back"></div> </div> </div> <div class="flip"> <div class="inner"> <div class="front"> <div class="block1" data-type="c8">8</div> </div> <div class="back"></div> </div> </div> <div class="flip"> <div class="inner"> <div class="front"> <div class="block1" data-type="c7">7</div> </div> <div class="back"></div> </div> </div> <div class="flip"> <div class="inner"> <div class="front"> <div class="block1" data-type="c6">6</div> </div> <div class="back"></div> </div> </div> <div class="flip"> <div class="inner"> <div class="front"> <div class="block1" data-type="c5">5</div> </div> <div class="back"></div> </div> </div> <div class="flip"> <div class="inner"> <div class="front"> <div class="block1" data-type="c4">4</div> </div> <div class="back"></div> </div> </div> <div class="flip"> <div class="inner"> <div class="front"> <div class="block1" data-type="c3">3</div> </div> <div class="back"></div> </div> </div> <div class="flip"> <div class="inner"> <div class="front"> <div class="block1" data-type="c2">2</div> </div> <div class="back"></div> </div> </div> </div> <div class="parent2"> <div class="flip"> <div class="inner"> <div class="front"> <div class="block2" data-type="c1">1</div> </div> <div class="back"></div> </div> </div> <div class="flip"> <div class="inner"> <div class="front"> <div class="block2" data-type="c8">8</div> </div> <div class="back"></div> </div> </div> <div class="flip"> <div class="inner"> <div class="front"> <div class="block2" data-type="c7">7</div> </div> <div class="back"></div> </div> </div> <div class="flip"> <div class="inner"> <div class="front"> <div class="block2" data-type="c6">6</div> </div> <div class="back"></div> </div> </div> <div class="flip"> <div class="inner"> <div class="front"> <div class="block2" data-type="c5">5</div> </div> <div class="back"></div> </div> </div> <div class="flip"> <div class="inner"> <div class="front"> <div class="block2" data-type="c4">4</div> </div> <div class="back"></div> </div> </div> <div class="flip"> <div class="inner"> <div class="front"> <div class="block2" data-type="c3">3</div> </div> <div class="back"></div> </div> </div> <div class="flip"> <div class="inner"> <div class="front"> <div class="block2" data-type="c2">2</div> </div> <div class="back"></div> </div> </div> </div> <div id="count"></div> </div> <script src="main.js"></script> </body> </html>

Answer 1

JQuery each() function will perform function on each item of an array.

https://api.jquery.com/JQuery.each/

 //shuffle position of cards $.fn.shuffleChildren = function () { $.each(this.get(), function (index, el) { var $el = $(el); var $find = $el.children(); $find.sort(function () { return 0.5 - Math.random(); }); $el.empty(); $find.appendTo($el); }); }; $(".parent1").shuffleChildren(); $(".parent2").shuffleChildren(); var counter = 3; var attempt = document.getElementById("count"); attempt.innerHTML = "You've " + counter + " lives"; var inner = $(".inner"); function hideCards() { inner.addClass("isFlipped"); inner.click(function () { var elem = $(this); //returns inner div elem.toggleClass("isFlipped"); var child = elem.find(".front").children(); //returns block class //var first = child.attr("data-type"); //returns data-type of the block class if (child.hasClass("matched")) { return; } child.toggleClass("selected"); child.siblings(".selected").removeClass("selected"); var selected = $("[data-type].selected"); if (selected.length === 2) { var type1 = selected.eq(0).data("type"); var type2 = selected.eq(1).data("type"); var isMatch = type1 === type2; if (isMatch) { selected.removeClass("selected").toggleClass("matched", isMatch, 2000); attempt.innerHTML = "You've " + counter + " lives"; } else { setTimeout(() => { // Delay hiding of cards for 2 seconds // flip each selected card $.each(selected,(idx,card) => { $(card).parents('.inner').addClass('isFlipped'); }); },2000); selected.removeClass("selected"); /* var inr = selected.parent().parent(); console.log(inr); inr.map(function(element) { $(element).addClass("isFlipped"); }); */ counter -= 1; if (counter == 0) { attempt.innerHTML = "GAME OVER!!"; } else { attempt.innerHTML = "You've " + counter + " lives"; } } } }) } setTimeout(hideCards, 5000);

 @import url("https://fonts.googleapis.com/css?family=Merriweather:400,400i,700"); .parent1, .parent2 { height: 100px; width: 100%; border: 1px solid grey; overflow: hidden; display: flex; } .parent1 div, .parent2 div { flex-basis: 100%; } .block1, .block2 { height: 100px; color: white; font-size: 30px; display: flex; justify-content: center; align-items: center; font-family: Merriweather, serif; } [data-type].selected, [data-type].selected:hover { border: 3px solid white; } [data-type].matched { display: none; } [data-type]:hover { border: 1px solid #000; } [data-type="c1"] { background-color: #F44336; } [data-type="c2"] { background-color: #E91E63; } [data-type="c3"] { background-color: #8E24AA; } [data-type="c4"] { background-color: #5E35B1; } [data-type="c5"] { background-color: #1E88E5; } [data-type="c6"] { background-color: #00796B; } [data-type="c7"] { background-color: #AFB42B; } [data-type="c8"] { background-color: #FF8F00; } .gameover { width: 100%; height: 100vh; background-color: coral; position: absolute; top: 0; left: 0; font-family: 'Press Start 2P', cursive; text-align: center; display: flex; justify-content: center; align-items: center; display: none; } .buttons { margin: auto; } .buttons a { text-decoration: none; font-size: 30px; color: #fff; } .gameover h1 { font-size: 40px; } /* FLIP CARD */ .flip { width: 300px; height: 200px; background-color: transparent; border: 1px solid #f1f1f1; } .inner { position: relative; width: 100%; height: 100%; transition: transform 0.8s; transform-style: preserve-3d; } /* .flip:hover .inner { transform: rotateY(180deg); } */ .front, .back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; } .front { background-color: pink; } .back { background-color: skyblue; transform: rotateY(180deg); } .inner.isFlipped { transform: rotateY(180deg); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> </head> <body> <div class="gameover"> <div class="content"> <h1>GAME OVER!!</h1> <div class="buttons"> <a href="">Retry</a> </div> </div> </div> <div class="main"> <div class="parent1"> <div class="flip"> <div class="inner"> <div class="front"> <div class="block1" data-type="c1">1</div> </div> <div class="back"></div> </div> </div> <div class="flip"> <div class="inner"> <div class="front"> <div class="block1" data-type="c8">8</div> </div> <div class="back"></div> </div> </div> <div class="flip"> <div class="inner"> <div class="front"> <div class="block1" data-type="c7">7</div> </div> <div class="back"></div> </div> </div> <div class="flip"> <div class="inner"> <div class="front"> <div class="block1" data-type="c6">6</div> </div> <div class="back"></div> </div> </div> <div class="flip"> <div class="inner"> <div class="front"> <div class="block1" data-type="c5">5</div> </div> <div class="back"></div> </div> </div> <div class="flip"> <div class="inner"> <div class="front"> <div class="block1" data-type="c4">4</div> </div> <div class="back"></div> </div> </div> <div class="flip"> <div class="inner"> <div class="front"> <div class="block1" data-type="c3">3</div> </div> <div class="back"></div> </div> </div> <div class="flip"> <div class="inner"> <div class="front"> <div class="block1" data-type="c2">2</div> </div> <div class="back"></div> </div> </div> </div> <div class="parent2"> <div class="flip"> <div class="inner"> <div class="front"> <div class="block2" data-type="c1">1</div> </div> <div class="back"></div> </div> </div> <div class="flip"> <div class="inner"> <div class="front"> <div class="block2" data-type="c8">8</div> </div> <div class="back"></div> </div> </div> <div class="flip"> <div class="inner"> <div class="front"> <div class="block2" data-type="c7">7</div> </div> <div class="back"></div> </div> </div> <div class="flip"> <div class="inner"> <div class="front"> <div class="block2" data-type="c6">6</div> </div> <div class="back"></div> </div> </div> <div class="flip"> <div class="inner"> <div class="front"> <div class="block2" data-type="c5">5</div> </div> <div class="back"></div> </div> </div> <div class="flip"> <div class="inner"> <div class="front"> <div class="block2" data-type="c4">4</div> </div> <div class="back"></div> </div> </div> <div class="flip"> <div class="inner"> <div class="front"> <div class="block2" data-type="c3">3</div> </div> <div class="back"></div> </div> </div> <div class="flip"> <div class="inner"> <div class="front"> <div class="block2" data-type="c2">2</div> </div> <div class="back"></div> </div> </div> </div> <div id="count"></div> </div> <script src="main.js"></script> </body> </html>