代码之家 › 专栏 › 技术社区 › alfredopacino

添加类直到键关闭

jquery javascript

alfredopacino · 技术社区 · 8 年前

我想添加一个css类(例如“ active “)至 #plane 直到键代码32(空格键)关闭(在键上,我想删除它)。我想不能使用相同的移动逻辑,在这种情况下,我看不出我应该在哪里删除类。

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'/>

1 回复 | 直到 8 年前

Ry- 8 年前

如果您将键放入一个结构中,该结构允许您查看是否按下了给定的键,那么您就不会在其上循环相当于你现在所拥有的:

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]);
}

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前