Unintuitive removeClass() problem

Question

I\'m using this flip plugin, see the code in this fiddle. The goal is to flip one box at a time, e.g. the second box clicked should revertFlip() the previous one.

Answer 1

Can you try this script

var $prevFlip;
$('.flippable:not(.reverted)').live('click',function()     {         
    var $this = $(this);         
    var $allBoxes = $('.flippable');                
    $this.flip(         {             
        direction: 'lr',             
        color: '#82BD2E',             
        content: 'now flipped',             
        onBefore: function()             {           
            if($prevFlip){
                $prevFlip.revertFlip();                 
                $prevFlip.removeClass('reverted');              
            }
        },             
        onAnimation: function ()              {                  
            //$allBoxes.preventDefault();             
            //This is not a valid line
        },             
        onEnd: function()             {                  
            $this.addClass('reverted');      
            $prevFlip = $this;
        }          
    });    
    return false;     
});

This reverts only one previous item. This is not a complete solution. I think there are more problems to this. I'll post any further updates if I found them.

I think @Andrew got the answer you are looking for.

Answer 2

You can filter $this out of $allBoxes by using the not() method.

$allBoxes.not($this).revertFlip();

Answer 3

I believe this has something to do with revertFlip() calling onBefore and onEnd. This is causing some weirdness with addClass and removeClass. Check out my modified example: http://jsfiddle.net/andrewwhitaker/7cysr/.

You'll see if you open up FireBug that onBefore and onEnd are called multiple times, with I think is having the following effect (I haven't exactly worked out what's going on):

1. The call to onEnd for the normal "flip" sets reverted class for the desired element.
2. The call to onEnd for the "revert flip" action sets the same element as above again when onEnd is called.

Here's a workaround. I've taken out using onBegin and simplified onEnd since I'm not exactly sure what's going on with the revertFlip() call:

$(function() {
    var handlerEnabled = true;
    $('.flippable:not(.reverted)').live('click', function() {
        if (handlerEnabled) {
            var $this = $(this);
            var $prevFlip = $('.reverted');
            var $allBoxes = $('.flippable');

            handlerEnabled = false;

            $prevFlip.revertFlip();
            $prevFlip.removeClass("reverted");
            $this.addClass("reverted");

            $this.flip({
                direction: 'lr',
                color: '#82BD2E',
                content: 'now flipped',
                onEnd: function() {
                    handlerEnabled = true;
                }
            });
        }
        return false;
    });
})

I'm using a boolean flag to enable and disable the event listener. Try out this example: http://jsfiddle.net/andrewwhitaker/bX9pb/. It should work as you described in your OP (only flipping one over at a time).

Your original code ($allBoxes.preventDefault()) is invalid, because $allBoxes is a collection of elements. preventDefault is a function on the jQuery event object.