Question

我正在尝试制作一个小内存游戏，我有一些jQuery问题：该游戏仅使用代码制作，因此这些对由html符号组成。我想要的是，如果两个点击“图块”的符号不相同，则重新加载页面。我尝试使用if ($(this).text() != $(".active").text()) { location.reload(); }，它似乎不起作用。我是一个jQuery n00b，很抱歉，如果我犯了明显的，愚蠢的错误^ __ ^

链接：http://www.carlpapworth.com/htmlove/memory.html

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>

使用Javascript：

$(document).ready(function() {


    $('td').click(openCard);

    function openCard(){
        $(this).addClass('opened');
        $(this).find('a').addClass('visible');
        if ($(".active")[0]){
            function match(){ 
                if  ($(this).text() != $(".active").text()) {
                location.reload();
                }       
                else {
                $(".active").removeClass("active");
                }
            }
        }
        else {
            $(this).addClass("active");
        }
    }
    });

Answer 1

尝试这样的事情

if ($(".active")[0]){

            if  ($(this).text() != $(".active").text()) {
            location.reload();
            }       
            else {
            $(".active").removeClass("active");
            }

    }

Answer 2

这里有一些问题。首先，您在match()块中声明了if ($(".active")[0])功能，这是不正确的。您应该在if块之外声明它，甚至在openCard函数之外，并使用match()调用它。

此外，您需要在将this对象存储在变量中之后传入它，否则将无法访问它。像这样：

var thisCard = $(this).text();
var activeCard = $(".active").text();

$(document).ready(function() {

    $('td').click(openCard);

    function openCard(){
        var that = $(this);
        that.addClass('opened');
        that.find('a').addClass('visible');
        if ($(".active")[0]){
            match(that);
        }
        else {
            that.addClass("active");
        }
    }
    function match(that){ 
        if  (that.text() != $(".active").text()) {
            location.reload();
        }       
        else {
            $(".active").removeClass("active");
        }
    }
});

Answer 3

您已在function match()块中定义了if ($(".active")[0])，但您没有在任何地方调用它。这就是原因，它永远不会进入这个功能。

顺便说一句，尝试使用FireBug（如果您使用的是Firefox）或开发人员工具（如果您使用的是Chrome）来调试您的JavaScript，以便您可以了解问题所在。它将使调试更容易。

jQuery记忆游戏 - 如果（text！= text）{reload page}

3 个答案: