Trying to implement if statement using hasClass(), but it's not working

Question

I'm making a memory game. When a card is flipped, the class .flip is added to that card. I'm keeping track of whether the two same cards have been picked by checking to see if the class .flip has been added to both, using the hasClass() method.

However, the jQuery for hasClass() doesn't seem to be working. I'm using a console log to check, but the console isn't printing anything. Here's my jQuery code:

$(document).ready(function(){

        var counter = 0;

        if(counter == 0){
            console.log(counter);
            // set 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");
        }

    });

Here's the HTML:

<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>

And the CSS:

.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 -- */

    .heart .front {
        float: none;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 900;
        width: inherit;
        height: inherit;
        border: 0;
        background: #333;
        text-align: center;

        -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.9);
        -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.9);
        box-shadow: 0 1px 5px rgba(0,0,0,0.9);

        -webkit-transform: rotateX(0deg) rotateY(0deg);
        -webkit-transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;

        -moz-transform: rotateX(0deg) rotateY(0deg);
        -moz-transform-style: preserve-3d;
        -moz-backface-visibility: hidden;

        -o-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -webkit-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
    }
    .heart.flip .front {
        z-index: 900;
        background: #333;

        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);

        -moz-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
        -webkit-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
        box-shadow: 0 15px 50px rgba(0,0,0,0.2);
    }

    .heart .back {
        float: none;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 800;
        width: inherit;
        height: inherit;
        border: 0;
        background: url('images/card-01.png') 0 0 no-repeat;
        text-shadow: 1px  1px 1px rgba(0,0,0,0.6); 

        -webkit-transform: rotateY(-180deg);
        -webkit-transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;

        -moz-transform: rotateY(-180deg);
        -moz-transform-style: preserve-3d;
        -moz-backface-visibility: hidden;

        -o-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -webkit-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
    }

    .heart.flip .back {
        z-index: 1000;
        background: url('images/card-01.png') 0 0 no-repeat;

        -webkit-transform: rotateX(0deg) rotateY(0deg);
        -moz-transform: rotateX(0deg) rotateY(0deg);

        box-shadow: 0 15px 50px rgba(0,0,0,0.2);
        -moz-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
        -webkit-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
    }
.click .front {
        cursor: pointer;
        -webkit-transform: rotateX(0deg);
        -moz-transform: rotateX(0deg);
    }
    .click.flip .front {
        -webkit-transform: rotateX(180deg);
        -moz-transform: rotateX(180deg);
    }
    .click .back {
        cursor: pointer;
        -webkit-transform: rotateX(-180deg);
        -moz-transform: rotateX(-180deg);
    }
    .click.flip .back {
        -webkit-transform: rotateX(0deg);
        -moz-transform: rotateX(0deg);
    }

Answer 1

You need to put your if clause that tests the classes inside an event handler. At the moment it's part of the document.ready handler and so the test only ever happens once when the page is first loaded.

Also, the two function version of .toggle() has been deprecated.

Try this instead, which appears to have the entire functionality you require:

$(document).ready(function(){

    $('.click').on('click', function() {
        $(this).toggleClass('flip');
        if ($('.flip').length === 2) {
            console.log('yo');
        }
    });

});

See http://jsfiddle.net/alnitak/Xtw58/