Adding a class to existing class-CodePudding

HTML:

<div >
   <div >

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 >

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!

CodePudding user response：

You can simply do this using jQuery

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

CodePudding user response：

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