Question

代码：

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

如何在同一页面上重复使用上述脚本，但是对于click功能使用不同的id，以及verso内容的不同内容。

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

Answer 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。

如何在同一页面上重用javascript函数？

1 个答案: