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!

“ and ” are invalid symbols here; use " instead. “but it couldn’t work” isn’t a meaningful problem description. Use the browser console (dev tools) (hit F12), read any errors. Try using your browser’s debug capabilities. The dev tools provide an Inspector / Elements tab. Inspect your elements. What do the applied CSS rules reveal? — Sebastian Simon
– Sebastian Simon, Commented Nov 7, 2022 at 3:02
$(event.currentTarget).classList classList is not a property of a jquery object. Just use event.currentTarget.classList - or use jquery method $(event.currentTarget).addClass("flipped") — fdomn-m
– fdomn-m, Commented Nov 7, 2022 at 6:59

Jesper Martinez · Accepted Answer · 2022-11-07 03:09:27Z

1

You can simply do this using jQuery

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

answered Nov 7, 2022 at 3:09

Jesper Martinez

6415 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mike Samuel · Accepted Answer · 2022-11-07 03:23:38Z

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

edited Nov 7, 2022 at 3:23

Mike Samuel

121k30 gold badges230 silver badges255 bronze badges

answered Nov 7, 2022 at 3:14

mehdi354

4133 silver badges5 bronze badges

Collectives™ on Stack Overflow

Adding a class to existing class

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related