合并两个Jquery脚本

Merge two Jquery scripts

本文关键字：两个 Jquery 脚本 合并      更新时间：2023-09-26

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

一个看起来像这个

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

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

您在第一个脚本中添加了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 不兼容

旧版本jQuery的大多数问题都在其迁移插件中得到了解决，您应该检查一下。

只需添加最新版本，该插件和脚本理论上应该可以工作。

与所有其他库同时包含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>
相关文章：