0

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();

2
  • Puedes consultar si el elemento tiene o no la clase card-view usando el método contains, 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 Commented el 30 jul. 2021 a las 7:42
  • Gracias, por tu ayuda ya lo resolvi. :') Commented el 30 jul. 2021 a las 16:46

1 respuesta 1

0

Agregue un id dentro de selectCard y luego aplique el booleano correspondiente

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', () => {
       let num = i + 1;
       if (num == 1) {
          //Solución problema
          if(selectCard[i].id === 'active'){
            selectCard[i].id = 'inactive';
            selectCard[i].classList.remove('card-view');
            rotateCard.style.transform = 'rotateY(0deg)';
            infoDown.play();
          } 
          else {
            selectCard[i].id = 'active';
            selectCard[i].classList.add('card-view');
            rotateCard.style.transform = 'rotateY(-180deg)';
            infoUp.play();
          
          }
        }
      
      if(num == 1){
      //Otra carta
      }
      if(num == 2){
      //Otra carta
      }
    });
  }      
});

selectOfCard();

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.