jquery - 尝试使用 hasClass() 实现 if 语句，但它不起作用

Question

我正在制作一个内存游戏。翻转卡片时，.flip 类将添加到该卡片中。我通过使用 hasClass() 方法检查类 .flip 是否已添加到这两张卡片来跟踪是否已选择两张相同的卡片。

但是，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);
    }

Answer 1

您需要将测试类的if 子句放在 事件处理程序中。目前它是 document.ready 处理程序的一部分，因此测试只会在页面首次加载时发生一次。

此外，.toggle() 的两个函数版本已被弃用。

试试这个，它似乎具有您需要的全部功能:

$(document).ready(function(){

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

});

参见 http://jsfiddle.net/alnitak/Xtw58/