翻转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

通过将flipbox的状态放到元素上，我使用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来恢复状态，Asad就可以提供更好的解决方案。