嘗試使用hasClass（）實現if語句，但它不起作用

Question

我在製作一個記憶遊戲。當卡被翻轉時，類.flip被添加到該卡。我通過使用hasClass（）方法檢查是否已將兩個相同的卡片添加到兩個卡片中，從而跟蹤是否選取了兩張相同的卡片。

但是，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/