点击时卡片翻转，仅使用关闭框关闭答案

【问题标题】：Card flip on click, close only with close box点击时卡片翻转，仅使用关闭框关闭
【发布时间】：2019-01-12 20:36:36
【问题描述】：

我已经设置了翻牌动画。

点击后，卡片会翻转。

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

我希望卡片只有在您单击背面的关闭框时才会翻转。

目前，我使用 jquery 向 div 添加一个类，它可以“翻转”卡片。

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

 });

在此处查看钢笔： https://codepen.io/dtomasch/pen/GBBMEm

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

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

【问题讨论】：

标签： javascript jquery css flip

【解决方案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');
});

【讨论】：

这个似乎最适合我，我就选择了这个。非常感谢！

【解决方案2】：

另一种巧妙的方法是使用jQuery on 方法将点击事件附加到文档并具有过滤器（选择器）。

$(document).on('click', ".card:not(.flipped)", function () { // ".card:not(.flipped)" means that if user click on .card element that doesn't have .flipped class
      $(".card").toggleClass('flipped');
  });

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

jQuery on 方法更强大一些，因为您可以提前向元素添加点击事件触发器，即在它出现在文档上之前。仅供参考，我不确定这是否会造成性能损失。

现场示例：https://codepen.io/anon/pen/yqqzxw

【讨论】：

【解决方案3】：

为.card 侦听器添加一个检查，并且仅当它还没有flipped 类时才添加该类。然后，向.closeButton 添加一个侦听器，以从closest .card 中删除flipped 类。确保stopPropagation 确保closeButton 点击不会传播到.card 侦听器：

$(".card").click(function () {
  if ($(this).hasClass('flipped')) return;
      $(this).addClass('flipped');
  });
$('.closeButton').on('click', function(e) {
  e.stopPropagation()
  $(this).closest('.card').removeClass('flipped');
});

【讨论】：

【解决方案4】：

如果card 没有翻转类，则第一个card 点击事件将仅添加flipped 类。

closeButton 点击事件将从card 元素中删除flipped 类，我使用stopPropagation 来阻止点击事件冒泡并增加card 点击。

$(".card").click(function () {
      if (!$(this).hasClass('flipped')) {
        $(this).addClass('flipped');
      }
  });

$('.closeButton').click(function(e){
  e.stopPropagation()
  $(this).closest('.card').removeClass('flipped');
})

codepen example

【讨论】：