jQuery在單擊功能上添加和刪除類的問題

Question

我創建了一個Jquery切換類函數，該函數添加和刪除在單擊eventListner上flipped的類。 請點擊這里 。 目前，當用戶單擊.card類中包裝的任何元素時，此功能均起作用。 我想限制用戶可以單擊的位置，因此僅在用戶單擊.active-btn時才允許單擊功能起作用。

我已經嘗試過這樣做，但是一旦卡被翻轉， active-btn類似乎就不起作用了。 從事物的外觀來看，“前div”位於“后div”的頂部下面是我的代碼的片段...

$('.active-btn').click(function(e){
             e.preventDefault();
            $card = $(this).closest('.card');
            $('.flipped').not($card).removeClass('flipped');
            $card.toggleClass('flipped');
        });

Answer 1

我基本上將.flip .card .face的z-index更改為-1 ，然后

.flip .card {
  -webkit-transform-style: flat;
}

您的原件的問題是，perserved-3d不斷更改z-index，這會導致訂單出現問題。

通過設置transform（rotate）取消z-index

這是更詳細的帖子。

Answer 2

您需要使用toggle元素，現在活動的btn會刪除該類，之后將不再添加它。

像這樣做：

$( ".active-btn" ).toggle(function() {
    e.preventDefault();
            $card = $(this).closest('.card');
            $('.flipped').not($card).removeClass('flipped');
            $card.toggleClass('flipped');
}, function() {
    e.preventDefault();
            $card = $(this).closest('.card');
            $('.flipped').not($card).addClass('flipped');
            $card.toggleClass('flipped'); );
});

Answer 3

使用！hasClass（類不存在）而不是不使用，

$('.active-btn').click(function(e){
         e.preventDefault();
        $card = $(this).closest('.card');
       if (!$('.flipped').hasClass($card)) {
                 removeClass('flipped');
                 $card.toggleClass('flipped');
            }
    });