Question

我找到了很多答案（大部分都与wordpress有关），但没有任何帮助。我是css / jquery的新手，所以需要我的手握一点。我试过这个但却无法让它工作Can I use multiple versions of jQuery on the same page?

我的代码在这里：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/jquery.slicknav.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#menu').slicknav();
});
</script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
    var jQuery_1_7_2 = $.noConflict(true);
</script>
<script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')     
</script>

<script src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
  var jQuery_1_9_1 = $.noConflict(true);
</script> 
<script src="js/owl.carousel.js"></script>

我在页面上使用了两个元素的源代码，一个调用jquery-1.7.2.min.js，另一个调用jquery-1.9.1.min.js。

1.7.2控制我的响应式导航栏，而图像轮播使用1.9.1。目前，轮播版本取代了导航栏（消失）。

我能如何解决这场冲突？

Answer 1

假设需要的不同版本，并且插件是在the correct pattern之后编写的，请不要使用noConflict，只需将脚本定位为插件即可在执行时可以访问正确的window.jQuery。

<script src="js/jquery-1.7.2.min.js"></script>
<!-- plugins that "only work with" 1.7.2: $/jQuery refer to 1.7.2 -->
<script src="js/jquery.slicknav.js"></script>

<script src="js/jquery-1.9.1.min.js"></script>
<!-- everything else: $/jQuery refer to 1.9.1 (but consider 1.11+) -->
<script src="js/owl.carousel.js"></script>

使用noConflict给出一个不同的名称是因为知道关于不同名称的代码可以使用它 - 这不是标准插件的情况。

但是，考虑简单地使用最新的1.x（当前为1.11.1）所有插件，因为jQuery非常向后兼容，几乎没有令人惊讶的变化（弃用路线图很长）。如果使用遗留功能，there is jquery-migrate.js to shim changes for older code可以消除许多此类迁移问题。

[jQuery-migrate]可用于检测和恢复已在jQuery中弃用并从1.9版开始删除的API或功能。

Answer 2

使用1.9.1的工作代码。将试验1.11

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.slicknav.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
       $('#menu').slicknav();
   });
</script>
<script src="js/owl.carousel.js"></script>

另一个相互冲突的jquery问题

2 个答案: