jQuery 加载函数或 matchMedia 或 .css() 函数不起作用

Question

有人可以帮忙解释一下为什么下面的代码不起作用吗？我似乎无法弄清楚为什么……对我来说，一切都应该正常。

jQuery(window).load(function($){
    if (window.matchMedia("(min-width: 768px)").matches) { 
        var sideHeight = $('.mainContent').css('height');
        $('.sidebar').css('height', sideHeight);
    }
});

这是一个仅包含 CSS 部分的 jsfiddle，它可以工作。 https://jsfiddle.net/24r9cax6/

我已经通过在该函数中放置一个警报来测试媒体匹配部分，我可以让警报在 window.load 上弹出，但是 CSS 代码不起作用。我一直无法让 CSS 代码在我的网站上运行，并使我的侧边栏与主要内容的高度相同。我把 js 放在头部，然后放在 body 的末尾。没有变化。

该网站是用 WP 构建的。内容是动态加载的，所以我认为它是在加载内容之前调整高度，但这正是 window.load() 应该解决的问题，对吧？

这是您可以查看的网站上的一篇文章。我希望侧边栏的高度与 mainContent div 的高度相同，因此灰色背景会继续向下延伸到页面下方。但仅限于平板电脑尺寸及以上(使用 Bootstrap )。

http://www.businesstransitionandexitplanning.com/turning-business-income-into-retirement-income/

Answer 1

您不能将 $ 传递给 .load() 并让它像将 $ 传递给 .ready 一样工作()。您需要包装整个函数:

(function($){

    $(window).load(function(){
        if (window.matchMedia("(min-width: 768px)").matches) { 
            var sideHeight = $('.mainContent').css('height');
            $('.sidebar').css('height', sideHeight);
        }
    });

})(jQuery);