Question

我试图创建一段非常简单的代码，允许您在屏幕上移动一个红色和蓝色的球 - 您单击要移动的那个，然后使用箭头键。我努力的部分是改变哪个球聚焦，即按箭头键时移动。

计划是在点击球时添加.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

在{em>查询的选择器和规则中的类名前面使用.来标记它作为班级。

班级名称本身不包含.

所以必须是：

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

Answer 2

使用此

http://jsfiddle.net/7NF3L/1/

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

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

jQuery添加和删除类

2 个答案: