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

Question

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

3

我正在制作一个记忆游戏。当卡片翻转时，会将类 .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");
        }

    });

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>

以下是相关的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);
    }

- argoncobalt

请注意，您使用的.toggle()已在1.8版中被弃用并在1.9版中被删除。 - snumpy

jQuery的hasClass()似乎无法正常工作 -- 你做了什么来验证这个问题？你是否在console.log中看到counter的值大于0？ - David Tansey

@DavidTansey他怎么能这样呢？这个函数只被调用一次，并立即将值设置为0。 - Alnitak

我的意思恰恰相反——如果他曾经到达执行addClass()调用的代码行，他应该已经看到了value = 1的价值。 - David Tansey

@DavidTansey他可以到达addClass调用，但是hasClass测试不在事件处理程序内，它们在页面加载时调用，在addClass调用被触发之前。 - Alnitak

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alnitak · Accepted Answer

你需要将测试类的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/