CODEWITHSUNDEEP
jqueryremoveclass
emeraldcity
emeraldcity

Reputation: 31

removeClass() not working?

I'm using some new CSS3 functionality to make a click function look like a flipping card. In doing so, the client has asked for the ability to flip back. I'm trying to use removeClass() to make that go, but I'm not able to. addClass() works fine, but the "flip" class is not getting removed. I'm using jquery 1.8.1. 

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

Upvotes: 0

Views: 8505

Answers (3)

SpYk3HH
SpYk3HH

Reputation: 22580

Some html might help, perhaps a jsFiddle, however, you could do with add remove alltogether.

If you set flipBack as default class (i'm assuming it may be animated but has a default state) then you can use jQuery's toggleClass much easier

$(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

Are you sure both clicks aren't being called at same time? some html would realy help

Upvotes: 2

Ruan Mendes
Ruan Mendes

Reputation: 92324

The problem is likely that your #flipBack is inside of .flipper. You need to stop the event from bubbling if that's the case.

Here's a sample of the problem http://jsfiddle.net/kSg89/1/

Here's the solution 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');
    });
});

Upvotes: 0

user1796666
user1796666

Reputation:

Perhaps the both events are called. And after removing the flip class in the second click it gets back in the first click

Upvotes: 2

Related Questions