0

我正在使用一些新的 CSS3 功能来使点击功能看起来像一张翻转卡片。在这样做时，客户要求能够翻转。我正在尝试使用 removeClass() 来实现，但我做不到。addClass() 工作正常，但“翻转”类没有被删除。我正在使用 jquery 1.8.1。

$(document).ready(function(){
    $('.flipper').click(function(){
        $(this).addClass('flip');
    });
    $('#flipBack').click(function(){
        $(".flipper").addClass('flipBack').removeClass('flip');
    });
});
4

3 回答 3

2

也许这两个事件都被调用了。在第二次单击中删除翻转类后，它会在第一次单击中返回

于 2012-11-07T17:25:42.957 回答
2

一些 html 可能会有所帮助，也许是jsFiddle，但是，您可以一起添加删除。

如果您将 FlipBack 设置为默认类（我假设它可能是动画但具有默认状态），那么您可以更轻松地使用 jQuery 的toggleClass

$(function() {
    $('.flipper').click(function(e) { e.stopPropagation(); $(this).toggleClass('flip flipBack') });
    // and if you really need it, tho i'm still unsure the full functionality here
    $('#flipBack').click(function(e) { e.stopPropagation(); $('.flipper').toggleClass('flip flipBack') });
})

jdFiddle 示例

您确定没有同时调用两次点击吗？一些 html 真的有帮助

于 2012-11-07T17:27:54.937 回答
0

问题可能出在您#flipBack的内部.flipper。如果是这种情况，您需要阻止事件冒泡。

这是问题的示例http://jsfiddle.net/kSg89/1/

这是解决方案http://jsfiddle.net/kSg89/2/

$(document).ready(function(){
    $('.flipper').click(function(){
        $(this).addClass('flip');
    });
    $('#flipBack').click(function(e){
        e.stopPropagation();
        $(".flipper").addClass('flipBack').removeClass('flip');
    });
});
于 2012-11-07T17:35:36.600 回答