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