我可以有两个相互重叠的JQuery函数，在一个页面中运行吗？

Question

嗨，我在一个html页面中实现了2个jquery时遇到了一些问题，这是我使用的查询：

<script language="Javascript" type="text/javascript" src="js/jquery.blinds-0.9.js"></script>

 <script type="text/javascript">                  //running the script for blinds
    $(window).load(function () {
            // start the slideshow
    $('.slideshow').blinds();
    })
    </script>



<script language="Javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="Javascript" type="text/javascript" src="jquery-ui.min.js"></script>

<script type="text/javascript">              //running the script for accordion
$(document).ready(function() {
$("#accordion").accordion();
});
</script>

问题是，如果我用html实现它们，那么只有一个脚本可以运行(无论是accordion还是blinds)，有谁知道如何修改它们，以便所有的jquery都可以运行，并且我可以在整个页面中重用它们？

例如，如果我在头部添加accordion js引用，百叶窗就不会运行。

非常感谢您的回复，谢谢！

Answer 1

只运行一个，因为另一个是在加载jQuery之前执行的

尝试：

<script src="jquery.min.js"></script>              <!--jQuery-->
<script src="jquery-ui.min.js"></script>           <!--jQueryUI plugin-->
<script src="js/jquery.blinds-0.9.js"></script>    <!--blinds plugin-->
<script>                                           <!--your scripts-->
    $(function() {
        $('#accordion').accordion();
        $('.slideshow').blinds();
    });
</script>

和jQueryUI has a built-in blinds effect。如果百叶窗插件有同样的效果，你可能就不需要它了。

Answer 2

首先，尝试清理调用脚本的顺序。让jQuery首先加载，然后所有其他库和自定义脚本最后加载。您可能还希望将其保存到外部JS文件中，以便改进维护。

<script type="text/javascript" src="js/jquery.blinds-0.9.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="path/to/your/javascript/foo.js"></script>

此外，属性language="Javascript"是冗余的，可以安全地删除。

在foo.js文件中，使用以下内容：

$(document).ready(function () {
    // start the slideshow & accordion
    $('.slideshow').blinds();
    $("#accordion").accordion();
});

这里的不同之处在于您使用$(document).ready()而不是$(window).load()。此外，您只需要调用$(document).ready()一次，而不是两次。

希望这能有所帮助。