Question

我正在为一款游戏编写一些代码，以便我更好地学习JS，我遇到了一个问题。我正在使用jQuery库来执行动画。

我想做什么（参见//淡出文字评论）：

当玩家按下空格键时，我想隐藏3个带有唯一ID的<p>个标签。我目前使用的代码（有点像）但是我想要删除<p>标签时我必须按空格键一次，而我想用一次按下来执行此操作。如果我使用text（）方法，那么我只需按空格键一次即可删除<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>

Answer 1

HTML标准不允许具有相同ID的多个元素。

您可以通过为class属性提供相同的class属性和查询来解决问题：

$("p.term1, p.operator, p.term2 ").fadeToggle("slow");

Answer 2

您可以考虑将您想要响应的所有元素都放在相同类的关键事件中，然后简单地调用您的函数：

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

干杯

如何通过单个按键使fadeToggle（）触发多个DOM元素

2 个答案: