jQueryフリップ関数を分離して1つのアイテムのみに影響を与える

Question

私はフリップするカードのデッキを持っています。アイデアは、クリックされたものだけがフリップするものであり、すべてではありません。 jqueryでそのロジックをどのように再構築しますか？ここで

は、私はあなたがcodepen

のおかげで、このリンクに残りの部分を見ることができる

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

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

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

を使用していますjqueryのです！

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);  
    });