如何在一个html文件中调用两个脚本

Question

我是新来的。我在一个 html 文件中使用 PrettyPhoto Lightbox 和 Flexslider。每当我将 PrettyPhoto 放在页面底部，就在结束 body 标记之前，它会使我的 Flex Slider 消失，并且 PrettyPhoto 灯箱配置不正确。我知道这是以前回答过的，但我不明白答案。有人可以重新告诉我吗？

下面是html文件：

<!-- Javascript -->
<script src="/js/jquery.flexslider.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />

<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        ("a[rel^='prettyPhoto']").prettyPhoto();
    });
    </script>
</body>

Answer 1

在包含 jQuery 本身之前运行使用 jQuery 的脚本是行不通的。

你不能在函数被包含之前调用它。

Answer 2

Concept Verification Demo

您很可能包含多个版本的jQuery - 每个插件一个版本 - 这就是问题所在。您可以使用jQuery.noConflict，或者您可以执行以下操作：

<script src="jquery-for-plugin1.js"></script>
<script>
    $(function( $ ) {
        //initialize plugin 1
    });
</script>

<script src="jquery-for-plugin2.js"></script>
<script>
    $(function( $ ) {
        //initialize plugin 2
    });
</script>

<script src="jquery-for-plugin3.js"></script>
<script>
    $(function( $ ) {
        //initialize plugin 3
    });
</script>