Question

我已经设置了卡片翻转动画。

点击后，卡片翻转过来。

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

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

当前，我使用jQuery向div添加一个类，从而“翻转”卡片。

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

 });

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

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

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

Answer 1

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

$(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方法更强大，因为您可以提前将click事件触发器添加到元素上，即在元素出现在文档上之前。仅供参考，我不确定这是否会影响性能。

实时示例：https://codepen.io/anon/pen/yqqzxw

Answer 2

而不是使用点击侦听器来定位整个卡片，而是将目标定位在最前面。这样，当整个卡片翻转时，卡片的前面现在就在背面，因此您可以定位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');
});

Answer 3

将检查添加到.card侦听器，并仅在没有flipped类的情况下添加该类。然后，向.closeButton添加一个侦听器，以从flipped closest中删除.card类。确保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');
});

Answer 4

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

closeButton点击事件将从flipped元素中删除card类，我使用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

单击时翻转卡，仅在关闭框时关闭

4 个答案: