jquery版本不兼容问题

sea-stream 2021-08-15 原文

在使用imgbox.js是出现的jquery版本不兼容问题，之后了解到jQuery.noConflict()的用法

jQuery.noConflict()的存在只有一个目的：它允许你在同一个页面加载多个jQuery实例，尤其是不同版本的jQuery。

code

    <link rel="stylesheet" href={% static \'/css/bootstrap.min.css\'%}>
    <link href={% static \'/css/bootstrap.min.css\'%} rel="stylesheet" />
    <link href={% static \'/css/font-awesome.min.css\'%} rel="stylesheet" />
    <link href={% static \'/css/ggtooltip.css\'%} rel="stylesheet" />
    <link href={% static \'/css/layui.css\'%} rel="stylesheet" />
    
    <script src={% static \'/js/jquery-3.3.1.min.js\'%}></script>
    <script src={% static \'/js/bootstrap.min.js\'%}></script>
    <script src={% static \'/js/ggtooltip.js\'%}></script>
    <script src={% static \'/js/gg.app.ui.js\'%}></script>


    <link rel="stylesheet" href={% static \'/css/lrtk.css\'%} />
    <script type="text/javascript" src={% static \'/js/jquery.min.js\'%}></script>
    <script type="text/javascript">
        var j$ = $;//jquery.min.js的$重命名为j$
        jQuery.noConflict();
    </script>


    <script type="text/javascript" src={% static \'/js/jquery.imgbox.pack.js\'%}></script>


    <script type="text/javascript">
        j$(document).ready(function() {
            j$("#example1-1").imgbox();


            j$("#example1-2").imgbox({
                \'zoomOpacity\'    : true,
                \'alignment\'        : \'center\'
            });


            j$("#example1-3").imgbox({
                \'speedIn\'        : 0,
                \'speedOut\'        : 0
            });


            j$("#example2-1, #example2-2").imgbox({
                \'speedIn\'        : 0,
                \'speedOut\'        : 0,
                \'alignment\'        : \'center\',
                \'overlayShow\'    : true,
                \'allowMultiple\'    : false
            });
        });
    </script>