2014-04-28 122 views
1

我不太熟悉JS或jquery,所以对我一无所知。我从网上下载网两个脚本,合并两个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> 
$(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不需要在这里发布。

如何使两个工作在一个页面上?

感谢

+0

你正在包含几个版本的jQuery。尝试坚持其中之一。 – thebjorn

+0

这很难说。脚本可能具有相互冲突的钩子。我会采取一个,并建立它。你很少能够复制和转储代码并使其完美工作。另外,我建议你使用最新的jquery版本。它应该是向后兼容的。加载jquery两次肯定是在寻求麻烦。 – ProfileTwist

+1

他使用的插件 - 你不能告诉他只是使用1版本的jQuery,而不知道插件是否需要特定的版本。做出假设是没有帮助的。 – Archer

回答

-1

与所有其他图书馆包括一次Ĵ查询标准librery。

<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> 
+0

看起来小册子插件需要jQuery 2. 1.6版本肯定不够。 – Archer

0

您正在添加在第一脚本和4 2个JS库到所述第二脚本。所有的库都必须运行它们各自的脚本。

这里的一个问题是,你添加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中解决,你应该检查一下。

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