jquery - 使用切换的 css $.hover() 的替代方案不起作用

Question

您好，我有以下 js 代码:

$(function () {
    if ($('html').hasClass('csstransforms3d')) {    

        $('.thumb').removeClass('scroll').addClass('flip');     

        $('.thumb.flip').hover(
            function () {

                $(this).find('.thumb-wrapper').addClass('flipIt');
            },
            function () {
                $(this).find('.thumb-wrapper').removeClass('flipIt');           
            }
        );

    } else {

        $('.thumb').hover(
            function () {
                $(this).find('.thumb-detail').stop().animate({bottom:0}, 500, 'easeOutCubic');
            },
            function () {
                $(this).find('.thumb-detail').stop().animate({bottom: ($(this).height() * -1) }, 500, 'easeOutCubic');          
            }
        );

    }
});

代码所做的基本上是在光标悬停在 div 区域上时翻转它。

我想改变这部分

$('.thumb.flip').hover( ... rest of code goes here ...

点击行为。我试过同时使用点击和切换，但它不起作用。

我试过使用这个解决方案，但没有成功:

$('.thumb.flip').click(
    function () {

        $(this).find('.thumb-wrapper').toggleClass('flipIt');
    },

$('.thumb.flip').on('click',
    function () {

        $(this).find('.thumb-wrapper').toggleClass('flipIt');
    },

$('.thumb.flip').toggle(
function () {

    $(this).find('.thumb-wrapper').addClass('flipIt');
}

谁知道这是为什么？

编辑:

明确一点，我想要的是在用户单击 div 而不是悬停时使 div 翻转。

这是我的 CSS

.thumb {
    display:block;
    width:200px;
    height:140px;
    position:relative;
    margin-bottom:20px;
    margin-right:20px;
    float:left;
}

    .thumb-wrapper {
        display:block;
        width:100%;
        height:100%;
    }

    .thumb img {
        width:100%;
        height:100%;
        position:absolute;
        display:block;          

    }

    .thumb .thumb-detail {
        display:block;
        width:100%;
        height:100%;
        position:absolute;          
        background:#fff;        
    }


/*
* Without CSS3 Scroll Up Effect
*/
.thumb.scroll {
    overflow: hidden;
}   

.thumb.scroll .thumb-detail {
    bottom:-280px;
}

/*
* CSS 3D Card Flip Effect
*/  
.thumb.flip {
    perspective:800px;
}

.thumb.flip .thumb-wrapper {
    transition: transform 1s;
    transform-style: preserve-3d;           
}

.thumb.flip .thumb-detail {
    transform: rotateY(-180deg);                        
}

.thumb.flip img,
.thumb.flip .thumb-detail {
    backface-visibility: hidden;
}

.thumb.flip .flipIt {
    transform: rotateY(-180deg);            
}

Answer 1

要在点击时切换类，只需使用 toggleClass :

$('.thumb.flip').on('click', function () {
    $(this).find('.thumb-wrapper').toggleClass('flipIt');
});