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>

这应该让你的第二个脚本运行。如果第一次没有运行那么它意味着＆＃39; jqzoom＆＃39;插件与jquery 2.1不兼容

Answer 2

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

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

Answer 3

所有其他库一次包含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>

合并两个Jquery脚本

3 个答案: