jquery - 单击后翻转卡不会卡住

Question

所以我有一些卡片在悬停时具有翻转效果，一旦我们看到卡片的背面，我希望它留在那儿，因为背面的复选框保持选中状态，我尝试使用 JS 但它没有用

这是 fiddle

https://jsfiddle.net/9xw2860r/50/

$('.flip').hover(function() {
  $(this).find('.card').toggleClass('flipped');
});

$('.checkbox1').click(function() {
  $(".card").addClass('flipped');
});

Answer 1

您的悬停离开将删除您在点击时添加的类。您可以检查复选框是否被选中，然后不要删除类 flipped on leave

https://jsfiddle.net/9xw2860r/51/

$('.flip').hover(function() {
  var $card = $(this).find('.card');
  var $checkbox = $(this).find('.checkbox');

  if (!$card.hasClass('flipped')) {
    $card.addClass('flipped');
  } else if ($card.hasClass('flipped') && !$checkbox.prop('checked')) {
    $card.removeClass('flipped');
  }
});