Javascript 在每张卡上添加一个按钮以翻转

因此，我的基本想法是在每张卡上添加一个按钮，然后翻转卡并重置先前翻转的卡。现在，我如何为每张卡制作一个特定的按钮，该按钮可以翻转/取消翻转卡和取消翻转之前翻转的卡（需要时）

我发现这个有问题。我环顾了一下互联网，但找不到任何解决这个具体问题的办法。它可能类似于。希望这能有所帮助：） 也可能是这样

$（'.flip container.flipper'）。单击（函数（）{
//翻转上一个悬停元素
$（'.flip container.hover'）.toggleClass（'hover'）；
//反向电流元件
$（this）.closest（'.flip container'）.toggleClass（'hover'）；
});
/*悬停时翻转窗格*/
.flip-container.hover.flipper{
变换：旋转（180度）；
}
.翻转容器，
.前线，
.回来{
宽度：250px；
高度：250px；
}
/*翻转速度*/
.鳍状肢{
过渡：0.8s；
变换样式：保留-3d；
位置：相对位置；
}
/*交换期间隐藏窗格的背面*/
.前线，
.回来{
背面可见性：隐藏；
位置：绝对位置；
排名：0；
左：0；
}
/*前窗格，置于后上方*/
.前线{
z指数：2；
变换：旋转（0度）；
}
/*背面，最初隐藏的窗格*/
.回来{
变换：旋转（180度）；
背景色：#fff；
}
.艺术家-1{
背景：url(http://img.bleacherreport.net/img/images/photos/003/556/940/edab30087cea36c0ca206fc61a4b10fa_crop_north.jpg?w=630&h=420&q=75)中心不重复；
背景尺寸：封面；
}

你赢了

你赢了

您似乎只需要添加一个按钮并将其添加到选择器中


$（'.flip container.flipper按钮'）。单击（函数（）{
//翻转上一个悬停元素
$（'.flip container.hover'）.toggleClass（'hover'）；
//反向电流元件
$（this）.closest（'.flip container'）.toggleClass（'hover'）；
});
/*悬停时翻转窗格*/
.flip-container.hover.flipper{
变换：旋转（180度）；
}
.翻转容器，
.前线，
.回来{
宽度：250px；
高度：250px；
}
/*翻转速度*/
.鳍状肢{
过渡：0.8s；
变换样式：保留-3d；
位置：相对位置；
}
/*交换期间隐藏窗格的背面*/
.前线，
.回来{
背面可见性：隐藏；
位置：绝对位置；
排名：0；
左：0；
}
/*前窗格，置于后上方*/
.前线{
z指数：2；
变换：旋转（0度）；
}
/*背面，最初隐藏的窗格*/
.回来{
变换：旋转（180度）；
背景色：#fff；
}
.艺术家-1{
背景：url(http://img.bleacherreport.net/img/images/photos/003/556/940/edab30087cea36c0ca206fc61a4b10fa_crop_north.jpg?w=630&h=420&q=75)中心不重复；
背景尺寸：封面；
}

轻弹
你赢了

轻弹
你赢了

Oh-wow没想到这么简单：）现在我可以加一点延迟，这样他们就不会同时转向了吗？+由于某些原因，在背面添加一个按钮以翻转同一张卡是不起作用的