0

我正在尝试制作一个小记忆游戏，但我遇到了一些 jQuery 问题：游戏仅使用代码制作，因此配对由 html-symbols 组成。如果两个单击的“图块”的符号不相同，我想要的是重新加载页面。我试过了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");
        }
    }
    });
4

3 回答 3

1

尝试这样的事情

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

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

    }
于 2012-10-16T08:56:13.130 回答
1

这里有几件事出了问题。首先，您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");
        }
    }
});
于 2012-10-16T08:58:42.640 回答
1

您已function match()在 if ($(".active")[0])块内定义，但您没有在任何地方调用它。这就是为什么，它永远不会进入那个函数。

顺便说一句，尝试使用 FireBug（如果您使用 Firefox）或开发工具（如果您使用 chrome）来调试您的 javascript，这样您就会知道问题出在哪里。这将使调试更容易。

于 2012-10-16T09:01:35.290 回答