Bootstrap 4如何在同一页面上使用多个jQuery版本[重复]

Posted 2023-05-07

【中文标题】Bootstrap 4如何在同一页面上使用多个jQuery版本[重复]

【英文标题】：Bootstrap 4 How to use multiple jQuery versions on same page [duplicate]

【发布时间】：2017-03-16 04:21:53

【问题描述】：

我正在开发一个我想使用 jQuery 2.2.4 和 jQuery 3.1.1 的网站。 我想为我的 owl carousel 2 使用 2.2.4 版本，但我需要 3.1.1 才能使 Bootstrap 4 Alpha 中的标准固定导航栏正常工作。 p>

但是，当我都添加以下行时..

<script type="text/javascript" src="/js/jquery-2.2.4.min.js"></script> <script type="text/javascript" src="/js/jquery-3.1.1.min.js"></script>

.. 只有菜单有效。这是我的 owl-carousel 2 初始化程序：

  $('.owl-carousel').owlCarousel(
        loop: true,
        margin: 30,
        nav: false,
        responsiveClass: true,
        responsive: 
            0: 
                items: 1
            ,
            600: 
                items: 2
            ,
            1000: 
                items: 3,
                loop: false,
                dots: true
            
        
    )

我搜索了其他主题并遇到了 noConflict();选项，但我不知道如何实现。

所以，我的轮播需要 v2.2.4，固定导航栏需要 v3.1.1（没有初始化程序）。我怎样才能在不遇到问题的情况下做到这一点？

【问题讨论】：

堆栈溢出请参考上一个线程：Implement jQuery noConflict()

【参考方案1】：

是的，这可能是由于 jQuery 的无冲突模式。

<!-- load jQuery 2.2.4 -->
<script type="text/javascript" src="jquery-2.2.4.min.js"></script>
<script type="text/javascript">
var jQuery_2_2_4 = $.noConflict(true);
</script>

<!-- load jQuery 3.1.1 -->
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
var jQuery_3_1_1 = $.noConflict(true);
</script>

然后，你将不得不使用 $('#selector').function(); 而不是

jQuery_2_2_4('#selector').function();或者 jQuery_3_1_1('#selector').function();

【讨论】：

我明白这一点，但我的问题是 botostrap 4 固定导航栏没有 jQuery 初始化程序。

对于 owl carousel 使用初始化程序，对于 bootstrap 4 使用最新的 JQuery 并且不要初始化它，bootstrap 会自己做这些事情:)