Jquery 使用toggle替代css$.hover（）不起作用

嗨，我有以下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);            
}

---

要在单击时切换类，只需使用toggleClass：

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

---

您可以像这样切换类：

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

---

您需要将

单击

和

切换类

功能结合起来：

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

---

这应该在

.thumb.flip
中的
.thumb包装器上切换类
flitIt
。还粘贴css？我希望在用户单击div而不是悬停时将其翻转。很抱歉，就像我之前提到的那样，我尝试过使用“单击并切换”（click and toggle），但它不起作用。
toggle（）
使用这种方式是不推荐的，如果您打算在单击时切换类，这是一种方法吗？
$('.thumb.flip').click(function(){
  $(this).find('.thumb-wrapper').toggleClass('flipIt');
});