Question

所以我有一些卡片有悬停的翻转效果，一旦我们在卡片背面看我希望它留在那里，因为背面的复选框保持检查，我尝试用JS，但它没有＆＃t; t工作

这里是小提琴

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

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

Answer 1

您的悬停假将删除您在点击时添加的课程。您可以选中是否选中该复选框，然后在离开

时不删除课程flipped

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');
  }
});

Answer 2

原因是，您是将class="checkbox1"分配给了父<div>，而不是实际的<input />元素。

此外，在收听click事件后，您必须检查复选框是否已选中：

$('.checkbox1').click(function() {
    if($(this).is(':checked')) {
         $(".card").addClass('flipped');
    }
    else {
        $(".card").removeClass('flipped');
    }
});

您也不需要JQuery中的悬停事件处理程序。相反，可以通过添加选择器在CSS中实现悬停效果：

.flip:hover .card {
   -webkit-transform: rotatey(-180deg);
    transform: rotatey(-180deg);
}

指向小提琴的链接是here。

点击后翻转卡片不会冻结

2 个答案: