addClass直到keydown

Question

我想在active上添加一个css类（例如“ #plane”），直到keyCode 32（空格键）关闭（在keyUp上我要删除它）。 我猜不能使用相同的运动逻辑，在这种情况下，我看不到应该删除该类的位置。

http://jsfiddle.net/fbFuW/220/

setInterval(movePlane, 20);
var keys = {}

$(document).keydown(function(e) {
    keys[e.keyCode] = true;
});

$(document).keyup(function(e) {
    delete keys[e.keyCode];
});


function movePlane() {
    for (var key in keys) {
        if (!keys.hasOwnProperty(key)) continue;
        if (key == 37) {
            $("#plane").animate({left: "-=5"}, 0);                
        }
        if (key == 38) {
            $("#plane").animate({top: "-=5"}, 0);  
        }
        if (key == 39) {
            $("#plane").animate({left: "+=5"}, 0);  
        }
        if (key == 40) {
            $("#plane").animate({top: "+=5"}, 0);  
        }
        if (key == 32) {
            $("#plane").addClass("active"); //where I should remove the class?
        }
    }
}

body{
background:white;
}
#plane {
    height: 50px;
    position:absolute;
    top:40%;
    left:40%;
}
.active {
    border:10px solid red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="plane" src='http://i.imgur.com/WmhK6mX.png' border='0'/>

Answer 1

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

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()代替持续时间为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]);
}