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，因此我无法轻松将脚本移动到页面底部。 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);
};

第三，我使用新的jQuery变量调用我的函数：

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

所以现在任何时候我需要引用我原来的jQuery库我只使用JQ而且我不必担心另一个库踩到我的任何函数。

我意识到这不是解决这个问题的最佳方法，我将努力消除额外的jQuery库，但这至少会使我的侧边栏在适当的时候保持适当的大小。

Answer 1

您可以在技术上将jQuery复制到一个仅供您使用的新变量 - 即JQ = jQuery;然后执行JQ(this)...

虽然你可能只想解决后续版本的插入问题 - 停止它，或确保你的版本最后添加，然后你的所有代码都被执行，所以他们不能覆盖它

Answer 2

将您的代码段包装在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 3

这是因为jQuery的第二个版本将覆盖前一个版本。除非您使用的遗留库与更高版本的jQuery不兼容，否则没有理由加载两个不同的版本。

要在Drupal 7中使用更高版本的jQuery，您需要使用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));

jquery.fn被覆盖

3 个答案: