3
respostas

[Dúvida] como posso aplicar esta funçao para uma lista de elementos?

Então eu gostaria de poder aplicar a mudança de cor do plano de fundo para todos os itens de dentro da lista, mas ainda nao consegui pensar em como posso estruturar isso. Já consegui implementar a mudança para uma classe em espcifico, porém preciso aplicar a uma lista de classes. Fico muito grato se alguem puder me auxiliar :)

Html

<a class="teste"  onclick="mudaParaVermelho()">C</a>
<a class="teste_dois"  onclick="mudaParaVermelho()">D</a>

JavaScript

listaClasse = ["teste", "teste_dois"]
valor = 0

function mudaParaVermelho() {
    var galleries = document.getElementsByClassName(`${listaClasse}`);
    console.log(galleries)
    var len =  galleries.length;

    if(valor == 0) {
        valor++
        for(var i=0 ; i<len; i++){
            galleries[i].style.backgroundColor="red";
            console.log("vermelho")}
    }else {
        valor--
        for(var i=0 ; i<len; i++){
            galleries[i].style.backgroundColor="white";
            console.log("branco")}

        }
}
3 respostas

Só para ter certeza, seu objetivo é que você clique em qualquer botão que ative a função e todos os elementos das classes vão mudar? Ou depende de qual botão vais pressionar?

Os dois kkk. Então, ficou meio confuso, mas vou tentar explicar. Eu queria que dependendo do botão que eu apertasse, o getElementsByClass conseguisse capturar a classe do botão que apertei para assim executar a função de mudar a cor. Eu consegui fazer isso para um elemento em espcifico, mas para fazer para os demais botões que vou colocar (cada um com uma classe diferente) eu teria que repetir o mesmo código para cada um, logo estou pensando em uma forma de automatizar isso e economizar no codigo.

Haverá momentos que vou precisar de mais de um botão ativo ao mesmo tempo, logo pensei em ao clicar no botão ele adicionar o nome da sua respectiva classe no array para poder ser iterado pelo getElementByClass e ao clicar novamente ele excluir o nome da sua classe do array e voltar a cor para branco.

Podemos fazer algumas modificações no seu código:

function mudaParaVermelho(classe) {
    var elementos = document.getElementsByClassName(classe);
    console.log(elementos)
    var len =  elementos.length;

    if(elemento.style.backgroundColor != "red") {
        for(var i=0 ; i<len; i++){
            galleries[i].style.backgroundColor="red";
            console.log("vermelho")}
    }else {
        for(var i=0 ; i<len; i++){
            galleries[i].style.backgroundColor="white";
            console.log("branco")}

        }
}

e no seu HTML:

<a class="teste"  onclick="mudaParaVermelho('teste')">C</a>
<a class="teste_dois"  onclick="mudaParaVermelho('teste_dois')">D</a>

Vai funcionar certinho com algumas ressalvas:

  • Se um elemento tiver mais de uma dessas classes, sempre que você clicar em qualquer uma delas, vai modificar a cor e talvez não seja isso que tu queira.
  • Eu imaginei o mesmo que você, utilizar o paramentro this e pegar a classe do elemento e modificar, pois ficaria dinamico a partir da classe que o botão tiver, porém não encontrei essa propriedade nas minhas pesquisas.

Minha versão

Fiz a minha própria versão do código, algumas coisas você pode não saber ainda, mas tudo será abordado nos cursos de JS da Alura. Inclusive aprendi nesse curso o que apliquei no meu código:

function trocarCorParaVermelho(classe){
            elementos = document.getElementsByClassName(classe)
            for (var elemento in elementos){
                corElemento = elementos[elemento].style.backgroundColor
                elementos[elemento].style.backgroundColor = corElemento == "red" ? "white" : "red"
            }
        }

Percebe que tem bem menos linhas de código? Esse é o poder da Alura, siga forte nos estudos, qualquer dúvida estamos aí.