翻转卡不会冻结后点击

Question

所以我有一些卡在悬停的翻转效果，一旦我们正在看卡背面我希望它留在那里作为背面的复选框保持检查，我试图与JS，但它没有工作

这里是小提琴

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

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

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

Answer 1

你悬停假期将删除你点击添加类。如果该复选框被选中，那么请不要拆卸假

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

原因是类flipped你可以做一个检查，就是你分配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。