翻轉DIV onclick

Question

我正在使用Flip!插件在點擊時翻轉div並在用戶再次單擊div時恢復翻轉。下面的代碼會使DIV翻轉，但是當您再次單擊它時不會將其翻轉。

的JavaScript

$(function(){ 
$("#flipbox").bind("click",function(){ 
    $("#flipbox").flip({ 
     direction:'rl', 
     content:'this is my new content', 
     onEnd: function(){ 
      $("#flipbox").bind("click",function(){ 
       $("#flipbox").revertFlip(); 
      }); 
     } 
    }) 
    return false; 
}); 

}）;

HTML

<div id="flipbox"> 
    Hello! I'm a flip-box! :) 
</div> 

得到任何幫助。

Answer 1

通過將翻轉框的狀態放到元素上，我使用if語句來檢查該狀態並確定如何翻轉該框。
的jsfiddle：http://jsfiddle.net/HP7mu/
的Javascript：

$(function(){ 
$("#flipbox").bind("click",function(){ 
    if($(this).data('flipped')!="yes"){ 
    $("#flipbox").flip({ 
     direction:'rl', 
     content:'this is my new content', 
     onEnd: function(){ 
       $("#flipbox").data('flipped','yes'); 
     } 
    }); 
    }else{ 
     $("#flipbox").flip({ 
     direction:'rl', 
     content:'Hello! I\'m a flip-box! :)', 
     onEnd: function(){ 
       $("#flipbox").data('flipped','no'); 
     } 
    }); 
    } 
    return false; 
}); 
}); 

的Html：同
注：由於證實在評論下方阿薩德具有簡單地使用revertFlip恢復了一個更好的解決了這個如果在代碼中觸發else，則表明狀態。