Unintuitive removeClass() problem

问题

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. During the animation I don't want the other boxes to be clickable. I noted that the removeClass() is not working.

<div class='flippable'>I'm unflipped 1</div> 
...
<div class='flippable'>I'm unflipped 9</div>

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

        $this.flip(
        {
            direction: 'lr',
            color: '#82BD2E',
            content: 'now flipped',
            onBefore: function()
            { 
                $prevFlip.revertFlip();
                $prevFlip.removeClass('reverted'); 
            },
            onAnimation: function () 
            { 
                $allBoxes.preventDefault();
            },
            onEnd: function()
            { 
                $this.addClass('reverted');
            }
         })
    return false;
    });

I'll appreciate a lot your advise and suggestions.

Edit:
Error Console Output: $allBoxes.preventDefault is not a function

回答1:

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):

The call to onEnd for the normal "flip" sets reverted class for the desired element.
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.

回答2:

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.

回答3:

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

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

来源：https://stackoverflow.com/questions/4514870/unintuitive-removeclass-problem

标签

javascript

jquery

jquery-plugins