Question

我使用jquery脚本作为下拉菜单，使用一个用于图像查看器。两个图书馆发生冲突。

以下脚本是我的库，我注意到了2个冲突的脚本。第一个块在我的脚本的标题中，第二个块在我的标记之前（这是图像滑块脚本工作的唯一方式）。

      <!-- Drop down plugin (within the <head> tag -->
        <script src="js/jquery-1.7.1.min.js"></script>
        <script src="js/superfish.js"></script>
        <script src="js/jquery.easing.1.3.js"></script>
        <script src="js/tms-0.4.1.js"></script>
        <link rel="stylesheet" type="text/css" href="jquery/css/custom-theme/jquery-ui-1.10.3.custom.css"/>

        <!-- Conflicting code  -->
        <script src="jquery/js/jquery-ui-1.10.3.custom.js"></script>
         <!-- Conflicting code ends  -->


    <!-- Content section <body> -->

    <!-- Image slider plug in (at the end of the <body> tag) -->

    <!-- Conflicting code  -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
     <!-- conflicting code ends -->

    <script type="text/javascript" src="slider/js/jquery-ui-1.10.3.custom.min.js"></script>
    <script type="text/javascript" src="slider/js/jquery.kinetic.min.js"></script>
    <script type="text/javascript" src="slider/js/jquery.mousewheel.min.js"></script>
    <script type="text/javascript" src="slider/js/jquery.smoothdivscroll-1.3-min.js"></script>
    <script type="text/javascript">
            // Initialize the plugin with no custom options
            $(document).ready(function () {
                // None of the options are set
                $("div#makeMeScrollable").smoothDivScroll({
                    manualContinuousScrolling: true,
                    autoScrollingMode: "",
                    visibleHotSpotBackgrounds: "always"
                });
            });
        </script>

我尝试过以下两个脚本，第一个没有解决冲突，第二个脚本没有加载（这是一个只显示背景颜色的空白页面）。我可能错误地使用了脚本。

    <script src="prototype.js"></script>
    <script src="jquery.js"></script>
    <script>

    var $j = jQuery.noConflict();
    // $j is now an alias to the jQuery function; creating the new alias is optional.

    $j(document).ready(function() {
        $j( "div" ).hide();
    });

    // The $ variable now has the prototype meaning, which is a shortcut for
    // document.getElementById(). mainDiv below is a DOM element, not a jQuery object.
    window.onload = function() {
        var mainDiv = $( "main" );
    }

    </script>

脚本2：

        <script src="prototype.js"></script>
        <script src="jquery.js"></script>
        <script>

        jQuery.noConflict();

        jQuery( document ).ready(function( $ ) {
            // You can use the locally-scoped $ in here as an alias to jQuery.
            $( "div" ).hide();
        });

        // The $ variable in the global scope has the prototype.js meaning.
        window.onload = function(){
            var mainDiv = $( "main" );
        }

        </script>

Answer 1

我不确定你的意思＆＃34;什么都不解决冲突＆＃34;在第一个例子中。但在第二个例子中，你确定它实际上并不完美吗？你有代码在文档准备好后立即隐藏整个页面上的所有div（$( "div" ).hide();）。这可能会导致页面看起来为空，除了背景颜色。

将noConflict（）与jquery库一起使用

1 个答案: