javascript - 单击时卡片翻转，仅使用关闭框关闭

Question

我设置了卡片翻转动画。

点击时，卡片会翻转过来。

卡片的“背面”有一个“关闭框”。

我希望卡片仅在您单击背面的关闭框时翻转过来。

目前，我使用 jquery 将一个类添加到 div，这会“翻转”卡片。

$(".card").click(function () {
  $(this).toggleClass('flipped');

 });

看这里的笔: https://codepen.io/dtomasch/pen/GBBMEm

我确定我需要将“toggleClass”更改为“addClass”，但我不确定如何定位 closeButton 并告诉它影响卡片。

编辑:我忘了说，这个页面上有多个 .card 实例，这就是为什么我使用 $this 而不是直接引用 .card 的原因，因为它显然会同时翻转所有卡片。

Answer 1

不是使用点击监听器定位整个卡片，而是只定位正面。这样，当整张卡片被翻转时，卡片的正面现在位于背面，您可以定位 closeButton 并单击卡片中的任何其他位置而不会被翻转。

$(".front").click(function() {
    $(".card").toggleClass('flipped');
});

$(".closeButton").click(function() {
    $(".card").toggleClass('flipped');
});

codepen 示例 https://codepen.io/anon/pen/vaaePJ

编辑:对于多个实例更改为。

$(".front").click(function () {
    $(this).parent().toggleClass('flipped');
});

$(".closeButton").click(function () {
    $(this).parent().parent().toggleClass('flipped');
});