4

Preciso que cada botão quando clicado fique amarelo e os outros voltem ao normal...segue o código e o fiddle:

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

JSFiddle

3 Respostas 3

6

No seu caso, faltou iterar sobre os botões, você iterou apenas na div#botoes, precisa iterar sobre os filhos dessa div que engloba os botões.

Dessa forma seu código ficaria:

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

JSFiddle dessa solução.

Outra forma seria iterar sobre os filhos, independente de quais sejam, através da função children:

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

JSFiddle dessa solução.

4
  • Tem um Fiddle desse pra eu dar uma brincada? Commented 21/09/2014 às 20:06
  • Eu cheguei a fazer mas fechei, vou refazer e coloco aqui.
    – Wakim
    Commented 21/09/2014 às 20:07
  • Pronto @CiganoMorrisonMendez, inclui os dois.
    – Wakim
    Commented 21/09/2014 às 20:09
  • Ficou bacana. +1. Commented 21/09/2014 às 20:12
5

Baseado no seu Fiddle, fiz outro.

O .click é um evento que deve monitorar os botões por class pra ser eficiente. Ou seja, defini a class para todos os seus botões e retirei a div de fora, que não tinha utilidade no exemplo.

O código ficou assim:

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

Ou seja, para cada classe .botoes, monitora-se o comportameno .click. Ao clicar, remove de todos os botões a classe botaoativo (que deixa o botão amarelo), e adiciona-se botaoativo apenas no botão clicado (onde uso o this).

2
  • O .click vai monitorar igualmente todos os seletores aplicados, independentemente se for classe, ID, tag, pseudo classe, find, children, parent ou qualquer outra função de seleção, ele não fara distinção nenhuma desde que receba o(s) elemento(s)... Commented 21/09/2014 às 21:20
  • Sim. Portanto, .botoes. Está mais claro no Fiddle. Commented 21/09/2014 às 21:26
3

Nessas situações que muitos esquecem que pode-se agrupar vários seletores tanto no CSS quanto no 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;
}

Veja funcionando no JSFiddle

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .