Question

我创建了一个Jquery切换类函数，它在单击eventListner上添加和删除类flipped。 click here。当用户点击.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

我基本上将z-index更改为-1上的.flip .card .face和

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

原始版本的问题在于，perserved-3d会不断更改z-index，从而导致订单出现问题。

z-index is canceled by setting transform(rotate)

以下是更详细的帖子。

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

jQuery在点击函数

3 个答案: