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

您的问题是，您点击任何“翻转链接”时，所有带有“卡片”类的元素都会翻转。更新您的代码只翻转所点击链接的父级：

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


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

请参阅updated codepen。

Answer 2

我对您的脚本进行了一些更改，它运行正常：https://jsfiddle.net/IA7medd/p5qr15dk/

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

  $(".flip-link").click(function() {
    $this = $(this).parent().closest('.card');
    $($this).flip(true);        
    $(".card-back", $this).show();

  });

  $(".contentContainer").click(function() {
    $this = $(this).parent().closest('.card');
    $($this).flip(false);       
  });

隔离jquery翻转函数只影响一个项目

2 个答案: