javascript - 隔离jquery翻转函数以仅影响一项

Question

我有一副可以翻转的牌。这个想法是只有被点击的那个应该翻转，而不是全部。我如何在 jquery 中重建该逻辑？

这是我正在使用的jquery

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

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

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

您可以通过此链接查看其余内容 codepen

谢谢!

Answer 1

您的问题是，您在单击任何“翻转链接”时使所有具有“card”类的元素翻转。更新您的代码以仅翻转单击链接的父级:

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


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

请参阅updated codepen .