0

私は、JS をよりよく学習するために行っているゲームのコードを少し書いていますが、問題に直面しました。jQuery ライブラリを使用してアニメーションを実行しています。

私がやろうとしていること（//フェードアウトテキストコメントを参照）：

<p>プレイヤーがスペースバー キーを押したときに、一意の ID を持つ 3 つのタグを非表示にしたいと考えています。私が現在持っているコードは（一種の）機能しますが、問題は、<p>削除したいタグごとにスペースバーを1回押す必要があることです。text() メソッドを使用すると、スペースバーを 1 回押すだけで、<p>タグ内のすべてのテキストを削除できます。

これが私のコードです：

$(document).ready(function() {
    $("body").keypress(
    function(event) {
        if (event.which == 32) {
            if (operator === "+") {
                result = parseInt(firstTerm) + parseInt(secondTerm);
            }
            else if (operator === "-") {
                result = parseInt(firstTerm) - parseInt(secondTerm);
            }
            //reset the player's current expression
            firstTerm = "";
            operator = "";
            secondTerm = "";
            //Fade out the text
            $("p#term1, p#operator, p#term2 ").fadeToggle("slow");
            //$("p#term1, p#operator, p#term2 ").text("");

            //clear the board of any selections
            for (var i = 0; i < tilesSelected.length; i++) {
                $("div#" + tilesSelected[i]).removeClass("tileselected");

            }
            //check to see if the player has scored a point
            if (result === goalNum) {
                alert("You just scored 1 point!");
                score++;
                goalNum = randNumXtoY(1, 30);
                $("div#targetnum").text(goalNum);
            }
            alert(result);
        }
    });
});​

html コードは次のとおりです。

            <body>
            <h1>This is my game. Yay!</h1>
            <div id="container">

                <div id="currentnum" class="currentstatus">
                    <p id="term1" class="x"></p>
                    <p id="operator" class="x"></p>
                    <p id="term2" class="x"></p>
                </div>


                <div id="targetnum" class="currentstatus">
                    <script type="text/javascript">
                        document.write("<p>" + goalNum +"</p>")
                    </script>
                </div>

            </div>



            </body>
4

2 に答える 2

2

HTML 標準では、同じ ID を持つ複数の要素は許可されていません。

要素に同じclass属性を与え、次の方法でクエリを実行することで、問題を解決できますclass。

$("p.term1, p.operator, p.term2 ").fadeToggle("slow");
于 2012-05-14T22:55:51.583 に答える
0

キーイベントに応答したいすべての要素に同じクラスを与えることを検討してから、次のように関数を呼び出すだけです。

// Apply effect to all elements with class "space-listener"
$('.space-listener').fadeToggle('slow');

乾杯

于 2012-05-14T23:32:21.387 に答える