javascript - 另一个冲突的 jquery 问题

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] can be used to detect and restore APIs or features that have been deprecated in jQuery and removed as of version 1.9.