Unintuitive removeClass() Problem

Question

Ich verwende this flip plugin, siehe den Code in this fiddle. Das Ziel ist es, eine Box auf einmal umzudrehen, z. Die zweite Box geklickt sollte revertFlip() die vorherige sein. Während der Animation möchte ich nicht, dass die anderen Felder anklickbar sind. Ich habe festgestellt, dass die removeClass() nicht funktioniert.

<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; 
    }); 

Ich werde eine Menge Ihre beraten und Vorschläge zu schätzen wissen.

Edit:
Fehlerkonsole Ausgang:$allBoxes.preventDefault is not a function

Answer 1

Ich glaube, das hat etwas mit revertFlip() Aufruf onBefore und onEnd zu tun. Dies verursacht einige Seltsamkeit mit addClass und removeClass. Schau dir mein modifiziertes Beispiel an: http://jsfiddle.net/andrewwhitaker/7cysr/.

Sie werden sehen, wenn Sie Firebug öffnen, dass onBefore und onEnd werden mehrmals aufgerufen, mit Ich denke die folgende Wirkung erzielt wird (ich habe genau das nicht geklappt, was los ist):

1. Der Aufruf an onEnd für den normalen "Flip" setzt die Klasse für das gewünschte Element zurückgesetzt.
2. Der Aufruf an onEnd für die Aktion "Zurückkehren spiegeln" setzt das gleiche Element wie oben wieder wenn onEnd aufgerufen wird.

Hier ist ein Workaround. Ich habe mit onBegin und vereinfachte onEnd herausgenommen, da ich nicht ganz sicher bin, was mit dem revertFlip() Anruf vor sich geht:

$(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; 
    }); 
}) 

ich ein boolesches Flag bin mit dem Ereignis-Listener zu aktivieren und deaktivieren. Probieren Sie dieses Beispiel aus: http://jsfiddle.net/andrewwhitaker/bX9pb/. Es sollte so funktionieren, wie Sie es in Ihrem OP beschrieben haben (nur umdrehen).

Ihr ursprünglicher Code ($allBoxes.preventDefault()) ist ungültig, weil $allBoxes eine Sammlung von Elementen ist. preventDefault ist eine Funktion auf der jQuery event object.

Answer 2

Sie $this aus $allBoxes filtern können die not()-Methode unter Verwendung.

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

Answer 3

können Sie versuchen, dieses Skript

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;  
}); 

Dies ist nur ein vorheriger Artikel zurückkehrt. Dies ist keine vollständige Lösung. Ich denke, dass es mehr Probleme gibt. Ich werde weitere Updates veröffentlichen, wenn ich sie gefunden habe.

Ich denke @Andrew habe die Antwort, die Sie suchen.