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/

尝试使用hasClass（）实现if语句，但它不起作用

1 个答案: