使用Jquery Flip包含多个项目

Question

我正在尝试使用基于＆＃34; Grid Style＆＃34;的jQuery Flip v1.0.12。文档：

Under Grid style example

问题是，当我使用手动触发器并添加按钮从前到后翻转卡片时，只有第一张卡片中的按钮有效，但它会同时翻转所有物品。

有没有办法绑定每个项目的点击，以便我可以纠正我遇到的问题？

 $(".card-grid").flip({
     trigger: 'manual'
 });

 $("#flip-btn").click(function(){
     $(".card-grid").flip(true);
 });

 $("#unflip-btn").click(function(){
     $(".card-grid").flip(false);
 });

查看我当前代码的JS小提琴示例

以下是我的示例和问题：JSFIDDLE

Answer 1

您需要将所有ID传递给类，然后在脚本中使用最近的ID才能翻转给定的元素：

$(".card-grid").flip({
    trigger: 'manual'
});
$(".flip-btn").click(function () {
    $(this).closest(".card-grid").flip(true);
});
$(".unflip-btn").click(function () {
    $(this).closest(".card-grid").flip(false);
});

http://jsfiddle.net/yf8n6upe/2/