jQuery adding and removing classes

Question

I'm trying to create a very simple piece of code that allows you to move a red and blue ball around the screen - you click on the one you want to move then use the arrow keys. The part I'm struggling with is changing which ball is focused on, ie moved when you press the arrow keys.

The plan is to add a .active class to ball you click on, while also removing the active class from the other.

I've got two simple divs, with the blue div initially set with the .active class:

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

Here's the 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;

}

Here's my 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");
});

I can move the blue ball around but clicking the red has no effect, the arrow keys continue to move the blue div.

Here it is on jsfiddle - http://jsfiddle.net/7NF3L/

Any suggestions as to better ways to achieve the same thing would also be welcome.

score 3 · Accepted Answer · answered Apr 20 '14 at 19:32

3

The . is used in front of the class name in a selector of a query and a rule to mark it as class.

The class name itself does not include the .

So it has to be:

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

answered Apr 20 '14 at 19:32

t.niese

39,256
9
74
101

Perfect thanks. I've tried to add another case so that if you press down and right arrows together it moves diagonally down and right, but it's not working - any ideas? - //down + right case 39 && 40: $('.active').animate({left: "+=10px"}, 0.01); $('.active').animate({top: "+=10px"}, 0.01); break; – JosephByrne Apr 20 '14 at 19:56
@JosephByrne not without seeing your code ;) But you will need to keep track of the pressed keys in your `keydown` and `keyup` callbacks. Check this question and the answer to it: [javascript multiple keys pressed at once](http://stackoverflow.com/questions/5203407/javascript-multiple-keys-pressed-at-once) i think this should help you to solve your problem. – t.niese Apr 20 '14 at 20:00

score 0 · Answer 2 · answered Apr 20 '14 at 19:35

0

Use this

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

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

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

answered Apr 20 '14 at 19:35

dbucki

454
3
7

When you suggest to change from delegate to direct event attaching, you should explain why, as it has nothing to do with the actual problem. – t.niese Apr 20 '14 at 19:37
don't see change params in addClass and removeClass? – dbucki Apr 20 '14 at 19:42
Sure I see the changes in the params, and those are correct so your answer is not wrong. But could be misleading as the OP uses `$(document).on("click", "#red", function () {` to attach events. You use `$("#red").click(function () {` and you also changed `$("#red").addClass` to `$(this).addClass`. Those are changes that are not necessary to fix the problem, so you should explain why you changed it. Why you think it is better to do it this way. – t.niese Apr 20 '14 at 19:46
This code it's clearer and use word `this` make code faster. Change params in function addClass and removeClass resolve the problem. – dbucki Apr 20 '14 at 19:55

jQuery adding and removing classes

2 Answers2