Question

所以当a.heart == 24时，我正在尝试更改td.opened。我不确定发生了什么事情会发生错误。

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');
        }
    }
});

Answer 1

这是因为$('.opened').length只在代码中计算一次。更改元素类时，不会实时更新集合。当然，开通卡的数量也无法自行改变。

替换

if (openedCards == 24){

通过

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

每次计算它。

jQuery记忆游戏：if $（'。opened'）。length; ==数字运行功能。

1 个答案: