LOTUSMS LOTUSMS - 6 months ago 25
Javascript Question

isolating a jquery flip function to affect only one item

I have a deck of cards that flip. The idea is only the one that is clicked should flip, not all of them. How would I reconstruct that logic in the jquery?

Here is the jquery I am using

$(".card").flip({
axis: 'y',
trigger: 'manual'
});

$(".flip-link").click(function() {
$(".card").flip(true);
$(".card-back").show();
});

$(".contentContainer").click(function() {
$(".card").flip(false);
});


You can see the rest on this link to codepen

Thanks!

3bh 3bh
Answer

Your issue is that you're making all elements with class "card" flip on clicking any "flip-link". Update your code to only flip the parent of the clicked link:

$(".flip-link").click(function() {
    $(this).parents(".card").flip(true);        
    $(".card-back").show();     
  });

See the updated codepen.

Comments