Solucionado
acho que faltou uma explicação de como as classes foram removidas e como foi adicionado ao botão clicado, mesmo eu ja entendendo o forEach ficou confuso o fato dele remover as classes na função, pois eu fiquei questionando como que o forEach percorreu a lista de botões e removeu todas as classes e a classe reapareceu no botão que eu cliquei. agora entendi que se deve ao fato de que a função é chamada e só depois é que a classe é adcionada.
Oi, Geraldo, tudo bem?
Quando você clica em um botão, a função alterarContexto é chamada. Dentro dessa função, usamos o método forEach para percorrer todos os botões e remover a classe active de cada um deles. Isso garante que nenhum botão esteja ativo antes de adicionar a classe ao botão que foi clicado.
Aqui está um exemplo prático para ilustrar:
const botoes = document.querySelectorAll('.app__card-button');
function alterarContexto(contexto) {
botoes.forEach(function(botao) {
botao.classList.remove('active');
});
contexto.classList.add('active');
}
const focoBt = document.querySelector('.app__card-button--foco');
const curtoBt = document.querySelector('.app__card-button--curto');
const longoBt = document.querySelector('.app__card-button--longo');
focoBt.addEventListener('click', () => {
alterarContexto(focoBt);
});
curtoBt.addEventListener('click', () => {
alterarContexto(curtoBt);
});
longoBt.addEventListener('click', () => {
alterarContexto(longoBt);
});
No exemplo acima, quando um botão é clicado, a função alterarContexto é chamada com o botão clicado como argumento (contexto). Dentro dessa função, usamos forEach para remover a classe active de todos os botões. Em seguida, adicionamos a classe active apenas ao botão que foi clicado.
Então, a ordem é:
active de todos os botões.active ao botão que foi clicado.Isso garante que apenas um botão tenha a classe active em um dado momento, destacando o botão clicado.
Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!