Tengo una galería de cartas, quiero que al darle click agregue la clase card-view con una rotación de -180deg y ejecute un sonido infoUp.play(); luego al volver a darle click quiero que elimine la clase card-view con una rotación de 180deg y genere otro sonido en este caso infoDown.play();
¿Puedo usar el evento toggle que agrega y quita la clase? pero sigo teniendo el mismo problema de sonido y la rotación. T.T
let selectOfCard = (() => {
const selectCard = document.getElementById('selectCard').children;
let rotateCard = document.querySelector('.card-transform');
for (let i = 0; i < selectCard.length; i++) {
//Seleciona las cartas
selectCard[i].addEventListener('click', () => {
if (num == 0) {
//Agregar clase, sonido y rotación
selectCard[i].classList.add('card-view');
rotateCard.style.transform = 'rotateY(-180deg)';
infoUp.play();
//Al volver a darle click
selectCard[i].classList.remove('card-view');
rotateCard.style.transform = 'rotateY(180deg)';
infoDown.play();
}
if(num == 1){
//Otra carta
}
if(num == 2){
//Otra carta
}
});
}
});
selectOfCard();
card-view
usando el métodocontains
, que te devuelve un valor booleano, según el cual podrás implementar un condicional para saber si estás añadiendo la clase o quitando la clase (toggle
) y en base a esto reproducir el sonido adecuado y rotar en el sentido correcto. Saludos