How to use this!

Question

I need each button when clicked yellow and the others back to normal...:

$( "#botoes" ).each(function() {
    $(this).click(function() {
        $(".botaoativo").removeClass('botaoativo');
        $(this).addClass('botaoativo');
    });
 });

Jsfiddle

Answer 1

In your case, missed to iterate over the buttons, you iterou only in the div#botoes, needs to iterate on the children of this div that encompasses the buttons.

That way your code would be:

$("#botoes div").each(function() {
    $(this).click(function() {
        $(".botaoativo").removeClass('botaoativo');
        $(this).addClass('botaoativo');
    });
});

Jsfiddle of that solution.

Another way would be to iterate on the children, regardless of which they are, through the function children:

$("#botoes").children().each(function() {
    $(this).click(function() {
        $(".botaoativo").removeClass('botaoativo');
        $(this).addClass('botaoativo');
    });
});

Jsfiddle of that solution.

Answer 2

Based on your Fiddle, made another.

The .click is an event that should monitor the buttons by class to be efficient. That is, I defined the class for all its buttons and removed the div outside, which had no use in the example.

The code went like this:

$(".botoes").click(function() {
    $(".botoes").removeClass('botaoativo');
    $(this).addClass('botaoativo');
});

That is, for each class .botoes, the behavior is monitored .click. By clicking, remove the class from all buttons botaoativo (which turns the button yellow), and adds botaoativo only on the button clicked (where I use the this).

Answer 3

In these situations many forget that you can group multiple selectors in both CSS and Jquery:

Jquery:

$('#botao1, #botao2, #botao3, #botao4').click(function () {
    if ($(this).hasClass('botaoativo')) return false; // presumindo que tenha mais comandos que não devem ser re-executados em caso de click no botão ativo
    $(".botaoativo").removeClass('botaoativo');
    $(this).addClass('botaoativo');
});

CSS:

#botao1, #botao2, #botao3, #botao4 {
    margin-left: 10px;
    width: 10px;
    float: left;
    height: 10px;
    background-color: #333333;
    cursor: pointer;
    position: relative;
    z-index: 10;
}
#botao1 {
    margin-left: 0;
}

See working on Jsfiddle