Question 36057 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Adding a class to existing class – Jquery

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!

Tags:

2

Answers


  1. 0

    You can simply do this using jQuery

    $(document).on("click", "div.card-back" , function() {
    $(this).addClass("flipped");
});
    Login or Signup to reply.
  2. 0

    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();
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search