jQuery adding and removing classes issue on click function

Question

I have created a Jquery toggle class function which adds and removes the class flipped on a click eventListner. click here. At the moment this function is working when the user clicks on any of the elements wrapped in the .card class. I when want to restrict where the user can click, therefore only allow the click function to work when the user clicks the .active-btn.

I have made attempts to do this however once the card is flipped the active-btn class doesn't seem to work. by the looks of things the 'front div' is sitting on top of the 'back div Below is a snippet of my code …

$('.active-btn').click(function(e){
             e.preventDefault();
            $card = $(this).closest('.card');
            $('.flipped').not($card).removeClass('flipped');
            $card.toggleClass('flipped');
        });

score 0 · Answer 1 · edited May 23 '17 at 10:26

0

I basically change the z-index to -1 on .flip .card .face, and

.flip .card {
  -webkit-transform-style: flat;
}

The problem with your original is that the perserved-3d keep changing the z-index which causing issues with the order.

z-index is canceled by setting transform(rotate)

Here is the post which goes in more detail.

edited May 23 '17 at 10:26

Community

1
1

answered Sep 07 '15 at 08:10

stanley1943

865
1
7
15

global-padding: display: none; hides everything – NewBoy Sep 07 '15 at 08:27
meh i don't think that's the case. maybe the case on the prototype i put on jsfiddle but defiantely not the case with the code i have on my local server… the 'front div' is sitting on to of the 'back div' thanks anyway – NewBoy Sep 07 '15 at 08:33
front div' is sitting on top of the 'back div' – NewBoy Sep 07 '15 at 09:08
I think I know the issue. If you flip the card, the transform rotate breaks the z-index which makes the "back" comes forward. http://jsfiddle.net/rcbayy5x/10/ is that something you are looking for? – stanley1943 Sep 07 '15 at 09:55
did you apply position absolute to the front div ? – NewBoy Sep 07 '15 at 10:14

score 0 · Answer 2 · answered Sep 07 '15 at 08:11

0

You need to use the toggle element, right now the active btn will remove the class and won't add it after.

Do it like this:

$( ".active-btn" ).toggle(function() {
    e.preventDefault();
            $card = $(this).closest('.card');
            $('.flipped').not($card).removeClass('flipped');
            $card.toggleClass('flipped');
}, function() {
    e.preventDefault();
            $card = $(this).closest('.card');
            $('.flipped').not($card).addClass('flipped');
            $card.toggleClass('flipped'); );
});

answered Sep 07 '15 at 08:11

Barr J

10,636
1
28
46

Have you tested your code before put it here ? It doesn't work ! – w3spi Sep 07 '15 at 08:12
Because it's a template :) I just gave you a breadcrumb here. – Barr J Sep 07 '15 at 08:17

score 0 · Answer 3 · answered Sep 07 '15 at 08:38

use !hasClass (class has not exist) rather than not,

$('.active-btn').click(function(e){
         e.preventDefault();
        $card = $(this).closest('.card');
       if (!$('.flipped').hasClass($card)) {
                 removeClass('flipped');
                 $card.toggleClass('flipped');
            }
    });

jQuery adding and removing classes issue on click function

3 Answers3