0

ちょっとした記憶ゲームを作ろうとしていますが、jQuery の問題がいくつかあります。ゲームはコードのみで作成されているため、ペアは html シンボルによって作成されます。私が望むのは、クリックされた 2 つの「タイル」のシンボルが同じでない場合、ページをリロードすることです。で試しましたが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

function match()ブロック内 を定義しif ($(".active")[0])ましたが、どこにも呼び出していません。そのため、その関数の内部には決して入りません。

ちなみに、FireBug（Firefoxを使用している場合）またはDeveloper Tools（chromeを使用している場合）を使用してJavaScriptをデバッグし、問題がどこにあるかを把握してください。デバッグが容易になります。

于 2012-10-16T09:01:35.290 に答える
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])外側で宣言し、 を使用して呼び出す必要があります。ifopenCardmatch()

また、変数に格納した後にオブジェクトを渡す必要があり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 に答える