在jQuery庫中使用noConflict（）

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>

我嘗試了以下2個腳本，第一個不執行任何操作來解決沖突，第二個導致頁面無法加載（這是一個空白頁面，僅顯示背景色）。 我可能不正確地使用了腳本。

    <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

我不確定您在第一個示例中“什么都無法解決沖突”的意思。 但是在第二個示例中，您確定它實際上運行不正常嗎？ 在文檔准備好后，您就有了可以隱藏整個頁面上所有div的代碼（ $( "div" ).hide(); ）。 這很可能導致頁面的背景顏色除外。

在jQuery庫中使用noConflict（）

問題描述

1 個解決方案

解決方案1
1 2014-05-13 15:10:50

在jQuery庫中使用noConflict（）

問題描述

1 個解決方案

解決方案1 1 2014-05-13 15:10:50

解決方案1
1 2014-05-13 15:10:50