Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Projeto] Implementação da função

Segue ai em baixo a forma que utilizei para implementação dessa função. Teria algum jeito de melhorar ou uma maneira mais resumida?

function alterarStatus(x) {

    let card = document.getElementById(`game-${x}`);
    let image = card.querySelector('.dashboard__item__img');
    let button = card.querySelector('.dashboard__item__button');

    let verifyButton = button.classList.contains('dashboard__item__button--return');

    if(verifyButton) {
        button.setAttribute('class', 'dashboard__item__button');
        image.setAttribute('class', 'dashboard__item__img');
        button.innerHTML = 'Alugar';
    } else {
        button.setAttribute('class', 'dashboard__item__button dashboard__item__button--return');
        image.setAttribute('class', 'dashboard__item__img dashboard__item__img--rented');
        button.innerHTML = 'Devolver';
    }

}
1 resposta
solução!

Olá Lucas, tudo bem? Espero que sim!

Seu código está bem estruturado e fácil de entender. No entanto, podemos fazer alguns ajustes para torná-lo mais conciso. Uma sugestão seria usar o método classList.toggle em vez de setAttribute. O método toggle adiciona uma classe se o elemento não a tiver, e remove se o elemento já a tiver. Isso pode simplificar bastante o seu código. Veja o exemplo abaixo:

function alterarStatus(x) {
    let card = document.getElementById(`game-${x}`);
    let image = card.querySelector('.dashboard__item__img');
    let button = card.querySelector('.dashboard__item__button');

    button.classList.toggle('dashboard__item__button--return');
    image.classList.toggle('dashboard__item__img--rented');

    if(button.classList.contains('dashboard__item__button--return')) {
        button.innerHTML = 'Devolver';
    } else {
        button.innerHTML = 'Alugar';
    }
}

Neste exemplo, usamos o classList.toggle para adicionar ou remover as classes dashboard__item__button--return e dashboard__item__img--rented. Depois, verificamos se a classe dashboard__item__button--return está presente para definir o texto do botão.

Lembre-se, o código acima é apenas uma sugestão e pode não funcionar perfeitamente no seu projeto sem alguns ajustes.

Espero ter ajudado e bons estudos!