Adding a class to existing class

Question

HTML:

<div class="card">
   <div class="card-back bi bi-bicycle">

CSS:

.card-back {
  transform: rotateY(270deg) translateZ(10px);
}
.flipped {
  transform: rotateY(180deg) translateZ(0);
}

Above are my existing code structure; am trying to add the ‘flipped’ class into the ‘card-back’ class ON CLICK in order to flip my card - desired output: <div class="card-back flipped bi bi-bicycle">

Wrote the following function but it didn’t work:

const flipCard = () => {
  $(“.card-back”).on(“click”, (event) => {
    $(event.currentTarget).classList.add(“flipped”);
  });
};
flipCard();

Any help/advice would be appreciated!

Answer 1

You can simply do this using jQuery

$(document).on("click", "div.card-back" , function() {
    $(this).addClass("flipped");
});

Answer 2

This will add the class as you wanted:

const flipCard = () => {
  console.log("click")
  $('.card').on('click', (event) => {
    $('.card-back').toggleClass('flipped');
    console.log("click")
  });
};
flipCard();