Currently, I am creating a memory game where the .flip class is added to a card when it is flipped. To track if two identical cards have been chosen, I am using the hasClass() method.
The issue is that the jQuery for hasClass() doesn't seem to be functioning correctly. The console log isn't displaying anything. Here's the snippet of my jQuery code:
$(document).ready(function(){
var counter = 0;
if(counter == 0){
console.log(counter);
// setting up click/tap panels
$('.click').toggle(function(){
counter = 1;
console.log(counter);
$(this).addClass('flip');
},function(){
/*$(this).removeClass('flip');*/
});
}
if($("#heart-01").hasClass("flip") && $("#heart-02").hasClass("flip")){
console.log("yo");
}
});
Below is the HTML structure:
<div id="heart-01" class="panel click heart">
<div class="front"></div>
<div class="back"></div>
</div>
<div id="heart-02" class="panel click heart">
<div class="front"></div>
<div class="back"></div>
</div>
Here's the CSS style sheet attached:
.panel {
float: left;
width: 150px;
height: 150px;
margin: 20px;
position: relative;
-webkit-perspective: 600px;
-moz-perspective: 600px;
}
/* -- Y axis rotation and general style for heart card -- */
// CSS styles go here...
.click .front {
cursor: pointer;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
}
// More CSS styling...