LOTUSMS LOTUSMS - 1 year ago 69
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 Source

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.