jquery - 翻转 DIV onclick

Question

我正在使用翻转！插件可在单击时翻转 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 : 相同
注意：正如下面的评论所示，Asad 有一个更好的解决方案，如果在代码中触发，只需简单地使用revertFlip来恢复状态。else