首页 > 解决方案 > 如何使用多个版本的 jQuery?

问题描述

Stack Overflow 上还有其他答案,但是我无法让它们中的任何一个起作用。

我需要使用 2 个版本的 jQuery。这是我的代码:

我链接到第一个版本,然后有这个代码:

 <script>
 var $i = jQuery.noConflict();
 </script>

然后我链接到第二个版本并有这个代码:

 <script>
 var $j = jQuery.noConflict();
 </script> 

这是我需要使用第二个版本 $j 运行的代码

<script type="text/javascript">

    $j.ready(function() {


        $j('#slider').layerSlider({
            sliderVersion: '6.2.1',
            type: 'fullsize',
            responsiveUnder: 0,
            fullSizeMode: 'hero',
            maxRatio: 1,
            parallaxScrollReverse: true,
            hideUnder: 0,
            hideOver: 100000,
            skin: 'outline',
            showBarTimer: true,
            showCircleTimer: false,
            thumbnailNavigation: 'disabled',
            allowRestartOnResize: true,
            skinsPath: 'skins/',
            height: 800
        });
    });

</script>

我在 Chrome 中检查了页面并没有显示任何错误,但它根本不会运行滑块。

标签: javascriptjqueryhtml

解决方案


这是一次加载(和使用)两个版本的 jQuery 的一种方法。根本不需要打电话.noConflict

console.log(jQuery3.fn.jquery);
console.log(jQuery2.fn.jquery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>var jQuery3 = jQuery;</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>var jQuery2 = jQuery;</script>

然后运行您的滑块脚本jQuery2

$jQuery2.ready(function() {
    $jQuery2('#slider').layerSlider({
        sliderVersion: '6.2.1',
        type: 'fullsize',
        responsiveUnder: 0,
        fullSizeMode: 'hero',
        maxRatio: 1,
        parallaxScrollReverse: true,
        hideUnder: 0,
        hideOver: 100000,
        skin: 'outline',
        showBarTimer: true,
        showCircleTimer: false,
        thumbnailNavigation: 'disabled',
        allowRestartOnResize: true,
        skinsPath: 'skins/',
        height: 800
    });
});

推荐阅读