jquery.fn覆蓋掉

Question

在我的地盤我有使用jQuery.fn方法，像這樣創造了一個jQuery函數：

jQuery.fn.equalHeights = function() { 
    var currentTallest = 0; 
    jQuery(this).each(function(){ 
     if (jQuery(this).height() > currentTallest) { 
      currentTallest = jQuery(this).height(); 
     } 
    }); 
    jQuery(this).css('min-height', currentTallest); 
}; 

我用這個功能來平衡側邊欄的大小在我的網站，所以我打電話在頁面完成加載之後，確保在進行大小調整之前一切都已到位。

jQuery(window).load(function(){ 
    jQuery('#sidebar-one, #sidebar-two, #content').equalHeights(); 
}); 

這完美的作品，除了一些我的網頁的用戶就會在體內區域jQuery庫的另一個實例添加到自己的網頁（無論何種原因）。這第二個庫導致我的功能停止正常工作。我假設這是因爲第二個jQuery覆蓋了使用jQuery.fn方法創建的所有函數。有什麼辦法可以防止這種情況發生？

筆記：我的網站運行Drupal 7，所以我不能輕鬆地將腳本移動到頁面的底部。平等高度函數不是由我寫的;我相信我在堆棧中找到它，所以我對fn方法（和JS一般）的知識並不是那麼廣泛。

---

---

編輯：基於以下所有偉大的建議，這是怎麼了，我終於得到它的工作。

首先，我給jQuery的我的「默認」實例的新變量來引用：

var JQ = jQuery.noConflict(); 

其次，我把使用新的jQuery變量的equalHeights功能的更有效的版本：

JQ.fn.equalHeights = function() { 
    var tallest = 0; 
    return this.each(function(){ 
     var h = JQ(this).height(); 
     tallest = h > tallest ? h : tallest; 
    }).css("minHeight", tallest); 
}; 

第三，我呼籲採用新的jQuery可變我的功能：

JQ('#sidebar-one, #sidebar-two, #content').equalHeights(); 

所以現在任何時候我需要引用我原來的jQuery庫我只是使用JQ，我不必擔心另一個庫在我的任何函數上步進。

我意識到這不是解決這個問題的最好方法，而且我將努力消除額外的jQuery庫，但這至少會讓我的邊欄在適當的時候保持適當的大小。

Answer 1

包裝你片斷模塊IEFE中，通過「舊」的jQuery參考：

(function($) { 
    // $ will always point to the jQuery version with the `equalHeights` method 
    $(window).load(function(){ 
     $('#sidebar-one, #sidebar-two, #content').equalHeights(); 
    }); 
}(jQuery)); 

參見jQuery.noConflict爲進一步技巧。

Answer 2

你可以jQuery的技術複製到一個新的變量只是爲您的使用 - 即JQ = jQuery;然後做JQ(this)...

雖然你可能只是想解決後續版本的插入 - 停止它，或確保您的版本最後加入和所有的代碼是繼執行，使他們不能覆蓋它

Answer 3

這是因爲第二個版本的jQuery會覆蓋前一個版本。除非您使用的舊庫與jQuery的更高版本不兼容，否則沒有理由加載兩個不同的版本。

使用jQuery的更高版本使用Drupal 7，你需要使用hook_js_alter腳本，然後添加類似以下到您的Drupal主題（的oldwildissue提供）：

function MYTHEME_js_alter(&$javascript) { 
    //We define the path of our new jquery core file 
    //assuming we are using the minified version 1.8.3 
    $jquery_path = drupal_get_path('theme','MYTHEME') . '/js/jquery-1.8.3.min.js'; 

    //We duplicate the important information from the Drupal one 
    $javascript[$jquery_path] = $javascript['misc/jquery.js']; 
    //..and we update the information that we care about 
    $javascript[$jquery_path]['version'] = '1.8.3'; 
    $javascript[$jquery_path]['data'] = $jquery_path; 

    //Then we remove the Drupal core version 
    unset($javascript['misc/jquery.js']); 
} 

這將允許你在Drupal 7中使用任何版本的jQuery。

我也注意到你的插件使用了一些相當不好的做法。這裏是你的插件的優化版本，採用良好的和完善的做法：

(function($){ 
    $.fn.equalHeights = function() { 
     var tallest = 0; 
     return this.each(function(){ 
      var h = $(this).height(); 
      tallest = h > tallest ? h : tallest; 
     }).css("minHeight", tallest); 
    }; 
}(jQuery));