-1

代码：

   <script type="text/javascript">
    function flip() {
        $("#email_flip").on("click",function(e){
        $(".flipbox").flippy({
            color_target: "#F4F4F4",
            direction: "top",
            duration: "750",
            verso: "text1",
            onFinish: function(){

                    $("#back").on("click",function(e){
                        $(".flipbox").flippyReverse();
                        setTimeout(function() {
                        flip();
                        }, 1000);
                    });


         }
         });
         e.preventDefault();
        });
    }
    $(document).ready(function(){flip();});
    </script>
<script type="text/javascript">
$("#back").on("click",function(e){
    $(".flipbox").flippyReverse();
});
</script>

如何在同一页面上重用上述脚本，但单击功能的 id 不同，而 verso 内容的内容不同。

我正在使用以下插件：http: //blog.guilhemmarty.com/flippy/

4

1 回答 1

1

免责声明：我在没有使用或查看插件的情况下写了这个。它需要进行测试，可能需要更多的工作。.flipbox例如，该函数可能对具有由其他函数调用设置的类的元素产生不良副作用。所有这些都提供了如何编写函数的示例。您的具体问题可能无法解决。

首先，将您的代码包装在function somename(your arguments){}.

把它放在一个文件中并命名为 myflip.js

function myflip(clickID, backID, versoContent){
    function flip() {
        $(clickID).on("click",function(e){
        $(".flipbox").flippy({
            color_target: "#F4F4F4",
            direction: "top",
            duration: "750",
            verso: versoContent,
            onFinish: function(){

                    $(backID).on("click",function(e){
                        $(".flipbox").flippyReverse();
                        setTimeout(function() {
                        flip();
                        }, 1000);
                    });


         }
         });
         e.preventDefault();
        });
    }
    $(document).ready(function(){flip();});
    $(backID).on("click",function(e){
        $(".flipbox").flippyReverse();
    });
}

重构说明：function() { flip(); }重复出现，通常可以简单地重构为flip不带括号，因为flip它是一个函数，我们不会重新排列参数或使用匿名包装器做任何事情。我会把这样的调整留给你。

然后在你的html中你需要

<script src="myflip.js"></script>

在该行之后，您可以从脚本标签中使用它：

<script>myflip("#email_flip","#back","text1"); </script>

尽管最好通过将所有 javascript 保存在 .js 文件中并使用脚本标签导入这些文件来分隔 html 和 javascript。

于 2013-08-30T02:21:01.587 回答