jQuery記憶遊戲：if $（'。opened'）。length; ==數字運行功能。

所以我試圖改變a.heart當有td.opened == 24.我不知道什麼是錯誤的，雖然因爲nothings發生。

HTML：

<body> 
<header> 
<div id="headerTitle"><a href="index.html">&lt;html<span class="heart">&hearts;</span>ve&gt;</a> 
      </div> 
      <div id="help"> 
       <h2>?</h2> 
       <div id="helpInfo"> 
        <p>How many tiles are there? Let's see [calculating] 25...</p> 
       </div> 
      </div> 
     </header> 
    <div id="reward"> 
     <div id="rewardContainer"> 
      <div id="rewardBG" class="heart">&hearts; 
      </div> 
      <p>OMG, this must be luv<br><a href="index.html" class="exit">x</a></p> 
     </div> 
    </div> 
    <div id="pageWrap"> 
      <div id="mainContent"> 
      <!-- DON'T BE A CHEATER !--> 
       <table id="memory"> 
        <tr> 
         <td class="pair1"><a>&Psi;</a></td> 
         <td class="pair2"><a>&para;</a></td> 
         <td class="pair3"><a>&Xi;</a></td> 
         <td class="pair1"><a>&Psi;</a></td> 
         <td class="pair4"><a >&otimes;</a></td> 
        </tr> 
        <tr> 
         <td class="pair5"><a>&spades;</a></td> 
         <td class="pair6"><a >&Phi;</a></td> 
         <td class="pair7"><a>&sect;</a></td> 
         <td class="pair8"><a>&clubs;</a></td> 
         <td class="pair4"><a>&otimes;</a></td> 
        </tr> 
        <tr> 
         <td class="pair9"><a>&Omega;</a></td> 
         <td class="pair2"><a>&para;</a></td> 
         <td id="goal"> 
       <a href="#reward" class="heart">&hearts;</a> 
         </td> 
         <td class="pair10"><a>&copy;</a></td> 
         <td class="pair9"><a>&Omega;</a></td> 
        </tr> 
        <tr> 
         <td class="pair11"><a>&there4;</a></td> 
         <td class="pair8"><a>&clubs;</a></td> 
         <td class="pair12"><a>&dagger;</a></td> 
         <td class="pair6"><a>&Phi;</a></td> 
         <td class="pair11"><a>&there4;</a></td> 
        </tr> 
        <tr> 
         <td><a class="pair12">&dagger;</a></td> 
         <td><a class="pair5">&spades;</a></td> 
         <td><a class="pair10">&copy;</a></td> 
         <td><a class="pair3">&Xi;</a></td> 
         <td><a class="pair7">&sect;</a></td> 
        </tr> 
       </table> 
      <!-- DON'T BE A CHEATER !--> 
      </div> 
    </div> <!-- END Page Wrap --> 
    <footer> 
     <div class="heartCollection"> 
      <p>collect us if u need luv:<p> 
      <ul> 
       <li><a id="collection1">&hearts;</a></li> 
       <li><a id="collection2">&hearts;</a></li> 
       <li><a id="collection3">&hearts;</a></li> 
       <li><a id="collection4">&hearts;</a></li> 
       <li><a id="collection5">&hearts;</a></li> 
       <li><a id="collection6">&hearts;</a></li> 
      </ul> 
     </div> 
     <div class="credits">with love from Popm0uth ©2012</div> 
    </footer> 

</body> 
</html>

的Javascript：

var thisCard = $(this).text(); 
var activeCard = $('.active').text(); 
var openedCards = $('.opened').length; 

$(document).ready(function() { 

$('a.heart').css('color', '#CCCCCC'); 
$('a.heart').off('click'); 

function reset(){ 
    $('td').removeClass('opened'); 
    $('a').removeClass('visible'); 
    $('td').removeClass('active'); 
}; 
    $('td').click(openCard); 

    function openCard(){ 
     $(this).addClass('opened'); 
     $(this).find('a').addClass('visible'); 
     if ($(".active")[0]){ 
       if ($(this).text() != $('.active').text()) { 
        setTimeout(function(){ 
         reset(); 
        }, 1000); 
       }  
       else { 
       $('.active').removeClass('active'); 
       } 
     } 
     else { 
      $(this).addClass("active"); 
     } 
     if (openedCards == 24){ 
      $(".active").removeClass("active"); 
      $("a.heart").css('color', '#ff63ff'); 
      $("a.heart").off('click'); 
     } 
    } 
});

來源

2012-10-16 Carl Papworth

這是因爲$('.opened').length在代碼中只計算一次。當您更改元素的類時，集合不會實時更新。當然，openCards的號碼不能改變它自己的。

替換

if (openedCards == 24){

通過

if ($('.opened').length == 24){

有它每次計算。

來源

2012-10-16 10:45:34

嗯，這聽起來很符合邏輯，但它仍然不起作用......更奇怪。 –

用count變量做這個更好嗎？ –

真棒，它工作！ –

jQuery記憶遊戲：if $（'。opened'）。length; ==數字運行功能。

回答

相關問題