javascript - 合并两个 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 不兼容