Question

我意识到有关于在页面上使用多个jquery版本的问题已有各种答案，但我无法弄清楚如何应用它们。

在我的页面上，我有两个.js文件 - 一个用于操作可折叠菜单，另一个用于厚箱库。当我添加图库时，可折叠菜单停止工作。当我尝试使用下面链接中的无冲突解决方案时，菜单工作但画廊图像将不再加载。

http://api.jquery.com/jQuery.noConflict/

我做错了什么想法？我是否需要在.html文件和.js文件中添加内容？

代码：

<script type="text/javascript" src="../../01 Main/includes/jquery-1.6.min.js"></script>
<script type="text/javascript" src="../../01 Main/includes/main.js"></script>
<script type="text/javascript">
<div id="log">
  <h3>Before $.noConflict(true)</h3>
</div>
</script>

<script type="text/javascript" src="../scripts/jquery-latest.js"></script>
<script type="text/javascript" src="../scripts/thickbox.js"></script>
<script type="text/javascript">
var $log = $( "#log" );

$log.append( "2nd loaded jQuery version ($): " + $.fn.jquery + "<br>" );

jq16min = jQuery.noConflict(true);

$log.append( "<h3>After $.noConflict(true)</h3>" );
$log.append( "1st loaded jQuery version ($): " + $.fn.jquery + "<br>" );
$log.append( "2nd loaded jQuery version (jqlatest): " + jqlatest.fn.jquery + "<br>" );
</script>

也尝试过：

<script type="text/javascript" src="../../01 Main/includes/jquery-1.6.min.js"></script>
<script type="text/javascript" src="../../01 Main/includes/main.js"></script>
<script type="text/javascript">
var jQuery_1_6_min = $.noConflict(true);
</script>

<script type="text/javascript" src="../scripts/jquery-latest.js"></script>
<script type="text/javascript" src="../scripts/thickbox.js"></script>
<script type="text/javascript">
var jQuery_latest = $.noConflict(true);
</script>

Answer 1

使用多个版本的jquery似乎并不聪明，但如果必须，你可以将其中一个版本分配给另一个全局变量，即链接到第一个版本

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
window._$ = jQuery;

然后加载下一个版本;

(function(){
  var newscript = document.createElement('script');
     newscript.type = 'text/javascript';
     newscript.async = true;
     newscript.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js';
  (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(newscript);
})();

Answer 2

可能重复：Can I use multiple versions of jQuery on the same page?

简短地回答：

<!-- load jQuery 1.1.3 -->
<script type="text/javascript" src="http://example.com/jquery-1.1.3.js"></script>
<script type="text/javascript">
var jQuery_1_1_3 = $.noConflict(true);
</script>

<!-- load jQuery 1.3.2 -->
<script type="text/javascript" src="http://example.com/jquery-1.3.2.js"></script>
<script type="text/javascript">
var jQuery_1_3_2 = $.noConflict(true);
</script>

必须经历同样的事情：）

如何解决多个版本的jquery之间的冲突？

2 个答案: