私のサイトでは、次のように 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 ライブラリの別のインスタンスをページの本文領域に追加します (何らかの理由で)。この 2 番目のライブラリが原因で、関数が正しく動作しなくなります。これは、2 番目の jQuery が jQuery.fn メソッドで作成されたすべての関数を上書きするためだと思います。それが起こらないようにする方法はありますか？
注: 私のサイトは Drupal 7 を実行しているため、スクリプトをページの下部に簡単に移動することはできません。equalHeights 関数は私が書いたものではありません。ここでスタック上で見つけたと思うので、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);
};
3 番目に、新しい jQuery 変数を使用して関数を呼び出します。
JQ('#sidebar-one, #sidebar-two, #content').equalHeights();
そのため、元の jQuery ライブラリを参照する必要があるときはいつでも JQ を使用するだけで、別のライブラリが自分の関数を踏むことを心配する必要はありません。
これはこの問題を解決する最善の方法ではないことを認識しており、追加の jQuery ライブラリを削除することに取り組んでいますが、これにより、少なくとも当面はサイドバーのサイズを適切に保つことができます。