0

Olá, tenho o seguinte código que esta funcionando mas quero melhorar ele. Alguma sugestão?

add evento de click

[1, 2, 3].forEach(num => {
  document.getElementById(`btn-lupa${num}`).addEventListener("click", () => {
    esquemaLupa(num);
  });
});

função ocultar div

function esquemaLupa(num) {

  if (num == 1) {
    document.getElementById(`feed-lupa-${num}`).style.display = "block";
    document.getElementById(`feed-lupa-2`).style.display = "none";
    document.getElementById(`feed-lupa-3`).style.display = "none";
  }

  if (num == 2) {
    document.getElementById(`feed-lupa-${num}`).style.display = "block";
    document.getElementById(`feed-lupa-1`).style.display = "none";
    document.getElementById(`feed-lupa-3`).style.display = "none";
  }
  if (num == 3) {
    document.getElementById(`feed-lupa-${num}`).style.display = "block";
    document.getElementById(`feed-lupa-2`).style.display = "none";
    document.getElementById(`feed-lupa-1`).style.display = "none";
  }

}

Html

<button id="btn-lupa1">1</button> 
<button id="btn-lupa2">2</button> 
<button id="btn-lupa3">3</button> 
<div id="feed-lupa-1">div1</div> 
<div id="feed-lupa-2">div2</div> 
<div id="feed-lupa-3">div3</div>
3
  • cade o código HTML?
    – novic
    Commented 5/03/2020 às 14:41
  • Cara use uma classe .ativo e aplica só no elemento clicado e retira dos irmãos. Colocar .style.display = "none/block"; não é uma boa escolha...
    – hugocsl
    Commented 5/03/2020 às 14:49
  • seria tipo isso mesmo: <button id="btn-lupa1">1</button> <button id="btn-lupa2">2</button> <button id="btn-lupa3">3</button> <div id="feed-lupa-1">div1</div> <div id="feed-lupa-2">div2</div> <div id="feed-lupa-3">div3</div>
    – DMiaguy
    Commented 5/03/2020 às 15:00

1 Resposta 1

1

Há várias formas de melhorar o código a nível de CSS e HTML (como por exemplo, usar classe em vez de id), mas dá pra melhorar o código JavaScript simplificando a função:

function esquemaLupa(num) {
   document.querySelectorAll("[id^='feed-lupa-']").forEach( (e)=>{ e.style.display = "none"; });
   document.getElementById(`feed-lupa-${num}`).style.display = "block";
}

O document.querySelectorAll("[id^='feed-lupa-']") seleciona todos os elementos que começam com o id feed-lupa- e os oculta, em seguida exibe apenas que tiver o valor em num:

[1, 2, 3].forEach(num => {
  document.getElementById(`btn-lupa${num}`).addEventListener("click", () => {
    esquemaLupa(num);
  });
});

function esquemaLupa(num) {
   document.querySelectorAll("[id^='feed-lupa-']").forEach( e=>{
      e.style.display = "none";
   });
   document.getElementById(`feed-lupa-${num}`).style.display = "block";
}
<button id="btn-lupa1">1</button>
<button id="btn-lupa2">2</button>
<button id="btn-lupa3">3</button>
<div id="feed-lupa-1">div1</div>
<div id="feed-lupa-2">div2</div>
<div id="feed-lupa-3">div3</div>

Só precisa se atentar para não usar outro elemento que comece com o id feed-lupa- exceto esses feed-lupa-1, feed-lupa-2 e feed-lupa-3.

Utilizando class

Utilizando class em vez de id fica bem mais fácil e evita possíveis conflitos de id:

document.querySelectorAll('.btn-lupa').forEach((e,i) => {
  e.addEventListener("click", e => {
    esquemaLupa(i);
  });
});

function esquemaLupa(i) {
   document.querySelectorAll('.feed-lupa').forEach( e=>{
      e.style.display = "none";
   });
   document.querySelectorAll('.feed-lupa')[i].style.display = "block";
}
<button class="btn-lupa">1</button>
<button class="btn-lupa">2</button>
<button class="btn-lupa">3</button>
<div class="feed-lupa">div1</div>
<div class="feed-lupa">div2</div>
<div class="feed-lupa">div3</div>

Veja que os parâmetros do forEach (e,i) retornam o elemento (e) e o índice (i), e na outra função você usa o i como índice para mostrar a div com respectiva classe que possui o índice [i].

2
  • opa! Eu estava chegando perto aqui entao! Comecei a testar o querySelector pra fazer os esquemas. Ajudou muito. Valew. Vou estudar esse seu código! att
    – DMiaguy
    Commented 5/03/2020 às 15:01
  • Blz. Acrescentei na resposta uma solução usando classes.
    – Sam
    Commented 5/03/2020 às 15:20

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 .