![]( )
![]( )
Sua função alterarStatus
já está fazendo o trabalho de maneira eficaz, alterando o texto e o estilo do botão, além de ajustar a classe das imagens associadas com o jogo. Porém, é possível simplificar essa função eliminando a repetição de código e tornando-a mais concisa. Aqui está uma versão simplificada:
function alterarStatus(gameId) {
const botao = document.getElementById(`game-${gameId}`).querySelector('.dashboard__item__button');
const imagensJogos = document.querySelectorAll(`#game-${gameId} .dashboard__item__img`);
const estaAlugado = botao.innerHTML === 'Devolver';
botao.innerHTML = estaAlugado ? 'Alugar' : 'Devolver';
botao.classList.toggle("dashboard__item__button--return", !estaAlugado);
imagensJogos.forEach(imagem => imagem.classList.toggle("dashboard__item__img--rented", !estaAlugado));
}
Uso de Template Strings: Primeiro, corrigi o uso de template strings para a interpolação de gameId
. As template strings no JavaScript são delimitadas por crases (` `) ao invés de aspas, permitindo a inserção de variáveis e expressões dentro de strings usando ${}
.
Operador Ternário: Utilizei o operador ternário para alternar o texto do botão. Isso reduz a necessidade de um bloco if...else
explícito, tornando o código mais limpo.
Método .toggle
com Segundo Parâmetro: Para alternar as classes, usei o método .toggle
no classList
dos elementos, que permite não apenas adicionar ou remover uma classe, mas também controlar essa adição/remoção através de um segundo parâmetro booleano. Esse parâmetro é verdadeiro para adicionar a classe (ou manter se já estiver adicionada) e falso para remover (ou manter removida). Isso elimina a necessidade de dois blocos separados if
e else if
para adicionar e remover as classes.
if...else
redundantes e utilizar operações condicionais mais compactas, o código fica mais fácil de ler e manter..toggle
, permite escrever código mais idiomático e eficiente.Esta versão simplificada mantém a mesma funcionalidade, mas de uma forma que aproveita melhor as capacidades do JavaScript para tornar o código mais limpo e fácil de entender.