Skip to main content
1 de 2
Sam
  • 80,8mil
  • 22
  • 73
  • 128

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.

Sam
  • 80,8mil
  • 22
  • 73
  • 128