jdFiddle Example

Question

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

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

Answer 1

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

Answer 2

有些html可能会有所帮助，可能只有jsFiddle，但是，您可以使用add alltogether。

如果你将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 Example

您确定同时没有同时调用这两个点击吗？一些HTML确实会帮助

Answer 3

问题可能是您的#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');
    });
});

removeClass（）无法正常工作？

3 个答案:

jdFiddle Example