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=>{
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 essesfeed-lupa-1
,feed-lupa-2
efeed-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]
.