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

Question

我设置了卡片翻转动画。

点击时卡片翻转。

卡片的"back"面有一个"close box."

我想让卡片只有在你点击背面的关闭框时才会翻过来。

目前，我在 div 和 jquery 中添加了 class，"flips" 卡。

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

 });

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

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

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

Answer 1

第一个 card 点击事件将只添加 flipped class 如果 card 没有翻转 class.

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

Answer 2

向 .card 侦听器添加检查并仅在 class 没有 flipped class 时才添加 class。然后，向 .closeButton 添加侦听器以从 closest .card 中删除 flipped class。确保 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 3

另一种巧妙的方法是使用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

Answer 4

不是用点击侦听器定位整个卡片，而是只定位前面。这样，当整张卡片被翻转时，卡片的正面现在位于背面，您可以将 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');
});

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

Card flip on click, close only with close box

javascript

jquery

css

flip