jquery - hasClass() を使用して if ステートメントを実装しようとしていますが、機能していません

Question

記憶ゲームを作っています。カードがめくられると、クラス .flip がそのカードに追加されます。hasClass() メソッドを使用して、クラス .flip が両方に追加されているかどうかを確認することで、2 枚の同じカードが選択されたかどうかを追跡しています。

ただし、hasClass() の jQuery は機能していないようです。コンソール ログを使用して確認していますが、コンソールには何も出力されません。ここに私のjQueryコードがあります:

$(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");
        }

    });

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>

そして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);
    }