javascript - jQuery 添加和删除类

Question

我正在尝试创建一段非常简单的代码，让您可以在屏幕上移动一个红色和蓝色的球 - 您单击要移动的球，然后使用箭头键。 我正在努力解决的部分是改变关注的球，即当您按下箭头键时移动。

计划是为您点击的球添加一个 .active 类，同时从另一个中删除 active 类。

我有两个简单的 div，蓝色的 div 最初是用 .active 类设置的:

<div id="blue" class="active"></div>
<div id="red"></div>

这是 CSS:

div {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    border: 5px solid gray;
    margin: 20px;
    position: relative;

}

#blue {
    background-color: blue;


}    

#red {
    background-color: red;

}

这是我的 javascript:

$(document).ready(function() {

   $("body").keydown(function(key) {
        switch(parseInt(key.which,10)) {
            // Left arrow key pressed
            case 37:
                $('.active').animate({left: "-=10px"}, 1);
                break;
            // Up Arrow Pressed
            case 38:
                case 37:
                $('.active').animate({top: "-=10px"}, 1);
                break;
            // Right Arrow Pressed
            case 39:
                case 37:
                $('.active').animate({left: "+=10px"}, 1);
                break;
            // Down Array Pressed
            case 40:
                case 37:
                $('.active').animate({top: "+=10px"}, 1);
                break;
        }
    });
});

$(document).on("click", "#red", function () {
    $("#red").addClass(".active");
    $("#blue").removeClass(".active");
});

$(document).on("click", "#blue", function () {
    $("#blue").addClass(".active");
    $("#red").removeClass(".active");
});

我可以移动蓝色球，但点击红色没有效果，箭头键继续移动蓝色 div。

在 jsfiddle 上 - http://jsfiddle.net/7NF3L/

我们也欢迎任何有关实现相同目标的更好方法的建议。

Answer 1

. 在查询 和规则 的选择器 中用在类名前面将其标记为类。

类名本身不包含.

所以它必须是:

$("#red").addClass("active");
$("#blue").removeClass("active");