在WordPress中运行jQuery的Document Ready与Window Resize函数

嗨，我懂你现在的烦恼——页面加载时调整div高度的逻辑好好的，但窗口尺寸变化时就是触发不了相同的操作对吧？其实问题大概率出在函数作用域或者事件绑定的写法上，我给你一个靠谱的解决方案，把逻辑抽离出来再统一绑定就搞定了：

步骤1：把调整div高度的核心逻辑抽成独立函数 #

先把你原来写在$(document).ready里的调整代码单独拎出来，变成一个可复用的函数，这样不管是页面加载还是窗口resize都能直接调用它：

function adjustDivHeights() {
    // 这里放你原来的调整逻辑，比如：
    let maxHeight = 0;
    // 假设你的目标div都有 .target-div 这个类名，按需替换成你的选择器
    $('.target-div').each(function() {
        const currentHeight = $(this).outerHeight(); // 用outerHeight更准确，包含内边距和边框
        if (currentHeight > maxHeight) {
            maxHeight = currentHeight;
        }
    });
    $('.target-div').height(maxHeight);
}

步骤2：同时绑定两个事件触发这个函数 #

接下来在jQuery的ready回调里，既执行一次函数处理初始加载，又给window的resize事件绑定这个函数。另外要注意：resize事件会在窗口调整过程中频繁触发，加个防抖延迟能避免浏览器卡顿，也让效果更顺滑：

jQuery(document).ready(function($) {
    // 页面加载完成时立即执行一次
    adjustDivHeights();

    // 窗口resize时触发，加防抖延迟200ms（可按需调整）
    $(window).on('resize', function() {
        clearTimeout($.data(this, 'resizeTimer'));
        $.data(this, 'resizeTimer', setTimeout(function() {
            adjustDivHeights();
        }, 200));
    });
});

为什么之前的尝试可能失败？ #

• 如果之前把调整逻辑写在ready的回调内部，那这个函数的作用域只在回调里，resize事件触发时找不到这个函数；
• 直接绑定resize事件但没加防抖，浏览器在resize过程中连续执行函数，可能因为计算太频繁导致看起来没生效，或者出现闪烁；
• 没注意WordPress里的jQuery冲突：WordPress默认用jQuery而不是$，所以在ready回调里把$作为参数传入，就能安全使用$简写了。

内容的提问来源于stack exchange，提问作者FF KP