Javascript 添加类直到键关闭

我想在

#平面

中添加一个css类（例如，“

活动的

”），直到键代码32（空格键）关闭（在键向上时，我想删除它）。 我猜不能使用相同的运动逻辑，在这种情况下，我看不出应该在哪里删除该类

setInterval（移动平面，20）；
变量键={}
$（文档）.keydown（函数（e）{
键[e.keyCode]=真；
});
$（文档）.keyup（函数（e）{
删除键[e.keyCode]；
});
函数movePlane（）{
for（变量键入键）{
如果（！keys.hasOwnProperty（key））继续；
如果（键==37）{
$（“#平面”）.animate（{左：“-=5”}，0）；
}
如果（键==38）{
$（“#平面”）.animate（{top:-=5}，0）；
}
如果（键==39）{
$（“#平面”）.animate（{左：+=5}，0）；
}
如果（键==40）{
$（“#平面”）.animate（{top:+=5}，0）；
}
如果（键==32）{
$（“#平面”）.addClass（“活动”）；//我应该在哪里删除该类？
}
}
}

正文{
背景：白色；
}
#飞机{
高度：50px；
位置：绝对位置；
最高：40%；
左：40%；
}
.主动{
边框：10px纯红
}

---

如果您将按键放入一个结构中，该结构允许您查看给定按键是否被按下，则不会在其上循环。相当于您现在拥有的：

function movePlane() {
    if (keys[37]) {
        $("#plane").animate({left: "-=5"}, 0);                
    }
    if (keys[38]) {
        $("#plane").animate({top: "-=5"}, 0);  
    }
    if (keys[39]) {
        $("#plane").animate({left: "+=5"}, 0);  
    }
    if (keys[40]) {
        $("#plane").animate({top: "+=5"}, 0);  
    }
    if (keys[32]) {
        $("#plane").addClass("active");
    }
}

然后，根据键设置类：

$("#plane").toggleClass("active", !!keys[32]);

也可以在此处使用

.css（）

而不是duration-0动画，并避免每次调用

movePlane（）

时选择元素：

var $plane = $("#plane");

function movePlane() {
    if (keys[37]) {
        $plane.css({left: "-=5"});                
    }
    if (keys[38]) {
        $plane.css({top: "-=5"});  
    }
    if (keys[39]) {
        $plane.css({left: "+=5"});  
    }
    if (keys[40]) {
        $plane.css({top: "+=5"});  
    }

    $plane.toggleClass("active", !!keys[32]);
}

---

如果你把按键放在一个可以让你查看某个给定按键是否被按下的结构中，你就不会在它上面循环。相当于您现在拥有的：

function movePlane() {
    if (keys[37]) {
        $("#plane").animate({left: "-=5"}, 0);                
    }
    if (keys[38]) {
        $("#plane").animate({top: "-=5"}, 0);  
    }
    if (keys[39]) {
        $("#plane").animate({left: "+=5"}, 0);  
    }
    if (keys[40]) {
        $("#plane").animate({top: "+=5"}, 0);  
    }
    if (keys[32]) {
        $("#plane").addClass("active");
    }
}

然后，根据键设置类：

$("#plane").toggleClass("active", !!keys[32]);

也可以在此处使用

.css（）

而不是duration-0动画，并避免每次调用

movePlane（）

时选择元素：

var $plane = $("#plane");

function movePlane() {
    if (keys[37]) {
        $plane.css({left: "-=5"});                
    }
    if (keys[38]) {
        $plane.css({top: "-=5"});  
    }
    if (keys[39]) {
        $plane.css({left: "+=5"});  
    }
    if (keys[40]) {
        $plane.css({top: "+=5"});  
    }

    $plane.toggleClass("active", !!keys[32]);
}

---

谢谢，但是我试着把

$（“#平面”）.toggleClass（“活动的”！！键[32]）

在

$（文档）上。键控

回调，它不起作用，我应该把它放在哪里？请注意：我想在按下按钮的同时保持类“活动”spacebar@alfredopacino：用它替换

movePlane（）

中的

if（键[32]）{$（“#平面”）.addClass（“活动”）}

，如上一个代码段所示

keydown

和

keyup

不需要更改。谢谢，但我尝试放置

$（“#平面”）。toggleClass（“活动”！！键[32]）

在

$（文档）上。键控

回调，它不起作用，我应该把它放在哪里？请注意：我想在按下按钮的同时保持类“活动”spacebar@alfredopacino：用它替换

movePlane（）

中的

if（键[32]）{$（“#平面”）.addClass（“活动”）}

，如上一个代码段所示

keydown

和

keydup

无需更改。