合并两个Jquery脚本

Question

我从网上下载了两个脚本，

一个看起来像这样

<script src="jqzoom/js/jquery-1.6.js" type="text/javascript"></script>  
<script src="jqzoom/js/jquery.jqzoom-core.js" type="text/javascript"></script>
<link rel="stylesheet" href="jqzoom/css/jquery.jqzoom.css" type="text/css">

<script>
$(function () {     
            $('.jqzoom').jqzoom({
            zoomType: 'standard',
            lens:true,
            preloadImages: false,
            alwaysOn:true
        });
});
</script>

和另一个

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script> window.jQuery || document.write('<script src="booklet/jquery-2.1.0.min.js"><\/script>') </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <script> window.jQuery.ui || document.write('<script src="booklet/jquery-ui-1.10.4.min.js"><\/script>') </script>
    <script src="booklet/jquery.easing.1.3.js"></script>
    <script src="booklet/jquery.booklet.latest.js"></script>

    <script>
        $(function () {     
            $("#mybook").booklet();
        });
    </script>

当我将两者都放在一个页面中时，只有后者可以工作，但是单独工作都可以。

我知道您不能在同一页面中两次调用jQuery，但是当我删除所有jQuery添加并仅使用/jquery.js时，它们都不起作用。 这是我下载的脚本，我认为它们之间的HTML不需要在此处发布。

如何使两者都在一页上工作？

Answer 1

您将在第一个脚本中添加2个js库，并在第二个脚本中添加4个。 所有运行它们各自的脚本所必需的库。

这里的一个问题是，您两次添加了jQuery 1.6和2.1。 这是不必要的。

尝试这样做：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script> window.jQuery || document.write('<script src="booklet/jquery-2.1.0.min.js"><\/script>') </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <script> window.jQuery.ui || document.write('<script src="booklet/jquery-ui-1.10.4.min.js"><\/script>') </script>
    <script src="booklet/jquery.easing.1.3.js"></script>
    <script src="booklet/jquery.booklet.latest.js"></script>

    //required for first script
    <script src="jqzoom/js/jquery.jqzoom-core.js" type="text/javascript"></script>
    <link rel="stylesheet" href="jqzoom/css/jquery.jqzoom.css" type="text/css">
    //-------------

    <script>
        $(function () {     
            //this is your second script
            $("#mybook").booklet();

            //this is your first script
            $(function () {     
                $('.jqzoom').jqzoom({
                zoomType: 'standard',
                lens:true,
                preloadImages: false,
                alwaysOn:true
            });

        });
    </script>

这应该使第二个脚本保持运行。 而且，如果首先不运行，则意味着“ jqzoom”插件与jquery 2.1不兼容

Answer 2

jQuery较旧版本的大多数问题已在其Migrate插件中解决，您应该检查一下。

只需添加最新版本，该插件和您的脚本理论上就可以正常工作。

Answer 3

与所有其他库一起包含j查询标准库。

<script src="jqzoom/js/jquery-1.6.js" type="text/javascript"></script>  
<script src="jqzoom/js/jquery.jqzoom-core.js" type="text/javascript"></script>
<link rel="stylesheet" href="jqzoom/css/jquery.jqzoom.css" type="text/css">
<script> window.jQuery || document.write('<script src="booklet/jquery-2.1.0.min.js"><\/script>') </script>
<script> window.jQuery.ui || document.write('<script src="booklet/jquery-ui-1.10.4.min.js"><\/script>') </script>
    <script src="booklet/jquery.easing.1.3.js"></script>
    <script src="booklet/jquery.booklet.latest.js"></script>

<script>
$(function () {     
            $('.jqzoom').jqzoom({
            zoomType: 'standard',
            lens:true,
            preloadImages: false,
            alwaysOn:true
        });

        $("#mybook").booklet();
});
</script>