使用 Jquery 翻转多个项目

Question

我正在尝试根据此处的 "Grid Style" 文档使用 jQuery Flip v1.0.12：

问题是，当我使用手动触发器并添加按钮将卡片从前向后翻转时，只有第一张卡片中的按钮起作用，但它会同时翻转所有项目。

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

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

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

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

查看我当前代码的 JS fiddle 示例

这是我的示例和问题：JSFIDDLE

Answer 1

您需要将所有 ID 传递给 class，然后在脚本中使用 closest 以便仅翻转给定的元素：

$(".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/

使用 Jquery 翻转多个项目

Using Jquery Flip with multiple items

jquery

flip