How to differentiate identical divs for use in a DOM function?

Question

I have a set of "cards" on my front end with a front side and a back side, these cards are created from a forEach script meaning there is a potentially different quantity each time and look something like this.

<div class="card-container" onclick="flip()">
                    <div class="card">   
                        <div class="front">
                                <p> front of card </p>
                        </div>
                        <div class="back">
                                <p> back of card</p>
                        </div>
                    </div>
            </div>

As you may have noticed, there is a flip() function, this displays the back of the card and hides the front and vice versa when clicked a second time. I would like this function only to apply to the current card, that is, the one that the user clicks, at the moment when I click it it turns over all of the cards.

function flip() {
    $('.card').toggleClass('flipped');
}

My first solution was to try to increment the class names (card1, card2 etc.) and copy the function for each different class name, however the following example syntax gave me the error that the document object could not be found, which presumably relates to the fact I am using ejs.

var card = document.createElement('div');
card.classList.add('card');

I am hoping that there is a solution in jQuery that allows you to specify that the function only be carried out on 1 div, or on children of the selected div as this would be the neatest solution I think.

Otherwise I think I need to work out a way to increment the div names through ejs.

Answer 1

you can do it with jquery click event handler. find card from the clicked div instead of flipping all cards.

Remove onclick function from html

<div class="card-container">
                    <div class="card">   
                        <div class="front">
                                <p> front of card </p>
                        </div>
                        <div class="back">
                                <p> back of card</p>
                        </div>
                    </div>
            </div>

Use below jquery

$(function(){
  $('.card-container').on("click", function(){
     $(this).find('.card').toggleClass("flipped");
  });
});

Answer 2

If the cards exist at load time do this

$('.card-container').on("click",function() { $(this).find(".card").toggleClass('flipped'); }); 

or

$('.card').on("click",function() { $(this).toggleClass('flipped'); });

If NOT then you need to delegate:

$(document).on("click",".card", function() { $(this).toggleClass('flipped'); }); 

$(document) can be changed to any static parent container

Answer 3

If you pass this in from your onclick function, it's relatively easy to use it in your flip function:

 function flip(element) { $(element).toggleClass('flipped'); } 

 .card-container { background-color: rgba(255, 245, 250, 0.9); border-top: solid 10px rgb(50, 200, 100); box-shadow: 0px 2px 1px 1px rgba(10, 10, 10, 0.3); padding: 10px; margin-bottom: 20px; position: relative; top: 0; transition: all 0.3s ease; } .flipped { box-shadow: 0px 6px 6px 3px rgba(10, 10, 10, 0.2); top: -5px; } body { background-color: #e3e3e3; font-family: arial; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="card-container" onclick="flip(this)"> <div class="card"> <div class="front"> <p> front of card </p> </div> <div class="back"> <p> back of card</p> </div> </div> </div> <div class="card-container" onclick="flip(this)"> <div class="card"> <div class="front"> <p> front of card </p> </div> <div class="back"> <p> back of card</p> </div> </div> </div> 

I added some styling just to illustrate when the cards get the flipped class.

Answer 4

You can only target the selected div by modifying the flip function to

function flip(e) {
    $(e.target).toggleClass('flipped');
}