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

Question

我正在开发一个我想使用 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（没有初始化程序）。我怎样才能在不遇到问题的情况下做到这一点？

Answer 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();