合并两个Jquery脚本

问题描述 投票:1回答:3

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

一个看起来像这样

<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不需要在这里发布。

如何在一个页面上同时工作?

javascript jquery
3个回答
0
投票

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


0
投票

旧jQuery版本的大多数问题都在他们的Migrate Plugin中解决,你应该检查一下。

只需添加最新版本,该插件和理论上的脚本应该可行。


-1
投票

与所有其他库一起包括jquery标准库。

<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>
© www.soinside.com 2019 - 2024. All rights reserved.