2

Estou tentando fazer em uma página, que botões que sejam clicados alterem seu estilo e também passem a exibir uma div ao serem clicados. Só que eles devem ser mutuamente exclusivos, ou seja, quando eu clicar em um, somente a div atrelada ao botão deve ser exibida e somente o botão clicado deve ter seu estilo alterado. O código que tenho utilizado é o seguinte:

//Adiciona eventos a cada botão
//Classe CSS 'side-button' para estado padrão e 'clicked-button' quando clicado
function buttonEventDef(){

  var current;

  for(var i=0; i<btns.length; i++){

      current = i;
      btns[i].addEventListener('click', function(){

          this.classList.remove('side-button');
          this.classList.add('clicked-button');
        show[current].style.display = 'initial';

          for(var j=0; j<btns.length; j++){
              if(j!=current){
                  btns[j].classList.remove('clicked-button');
                  btns[j].classList.add('side-button');
                  show[j].style.display = 'none';
              }
          }

      });

  }

}

Mas quando eu aperto um botão ele a mentém o seu estilo , mesmo após eu apertar outro botão. As divs sguem o mesmo comportamnto quanto a visibilidade.

Por acaso há uma forma melhor de fazer isso?

0

1 Resposta 1

0

Para guardares esse i/current dentro do ciclo for tens de criar um novo escopo. Dessa maneira podes guardar por exemplo var thisIndex = i; e ter a certeza que esse valor se mantém na memória e não é re-escrito na proxima iteração do ciclo for.

Sugestão:

for (var i = 0; i < btns.length; i++) {
    (function () {
        var thisIndex = i;
        btns[i].addEventListener('click', function () {
            this.classList.remove('side-button');
            this.classList.add('clicked-button');
            show[thisIndex].style.display = 'initial';

            for (var j = 0; j < btns.length; j++) {
                if (j != thisIndex) {
                    btns[j].classList.remove('clicked-button');
                    btns[j].classList.add('side-button');
                    show[j].style.display = 'none';
                }
            }
        });
    })();
}

jsFiddle: http://jsfiddle.net/mxe1h0e2/

3
  • 1
    Isso funcionou, muito obrigado! Posso apenas saber por quê colocar a função dentro do primeiro for dentro dentro de parênteses, e também o porque de abrir e fechar depois destes?
    – Hian Neiva
    Commented 11/05/2015 às 22:13
  • @HianNeiva fico contente de ter ajudado. Dá uma olhada aqui sobre IIFEs: pt.stackoverflow.com/a/23788/129
    – Sergio
    Commented 12/05/2015 às 5:11
  • Agora compreendo. É importante saber sobre as IIFEs já que as vezes JS pode confuso quanto o escopo de variáveis e funções. Novamente, muito obrigado!
    – Hian Neiva
    Commented 13/05/2015 às 12:10

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 .