翻轉卡不會凍結後點擊

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。