jQuery窗口Resize时If/Else If语句失效，求无刷新执行脚本方案

首先，你的问题核心是Resize事件绑定后未正确触发脚本逻辑，且没有在页面初始化时就执行一次逻辑——这就是为什么只有刷新才生效，调整窗口时没反应的原因。下面给你一套完整的解决方案：

步骤1：封装逻辑为可复用函数 #

把你针对不同屏幕尺寸的处理代码抽成独立函数，这样既可以在页面加载时执行，也能在窗口resize时调用，避免代码冗余：

function handleScreenSize() {
    var windowWidth = $(window).width();
    
    // 大屏幕（>1200px）逻辑
    if (windowWidth > 1200) {
        $('.menus-area .posts .tileh4 span:first-child').each(function() {
            var words = $(this).text();
            var maxWords = 22;
            // 注意：你原来的words.len应该是words.length，这里修正一下
            if (words.length > maxWords) {
                var trimmedText = words.substring(0, maxWords) + '...';
                $(this).text(trimmedText);
            }
        });
    } 
    // 可继续添加其他屏幕尺寸的else if逻辑
    else if (windowWidth <= 1200 && windowWidth > 768) {
        // 中等屏幕的处理代码
        $('.menus-area .posts .tileh4 span:first-child').each(function() {
            // 恢复原始文本（需提前存储）
            var originalText = $(this).data('originalText') || $(this).text();
            $(this).text(originalText);
        });
    } 
    else {
        // 小屏幕的处理逻辑
        $('.menus-area .posts .tileh4 span:first-child').each(function() {
            var originalText = $(this).data('originalText') || $(this).text();
            $(this).text(originalText);
        });
    }
}

步骤2：绑定Resize事件并初始化执行 #

接下来，需要在页面加载完成时执行一次函数，同时绑定resize事件触发函数。另外，为了避免resize事件频繁触发导致性能问题，建议添加防抖处理：

// 防抖函数：避免resize频繁触发
function debounce(func, wait) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        clearTimeout(timeout);
        timeout = setTimeout(function() {
            func.apply(context, args);
        }, wait);
    };
}

// 页面加载完成后执行初始化
$(document).ready(function() {
    // 提前存储每个元素的原始文本，方便后续恢复
    $('.menus-area .posts .tileh4 span:first-child').each(function() {
        $(this).data('originalText', $(this).text());
    });
    
    // 首次加载就应用对应尺寸的逻辑
    handleScreenSize();
    
    // 绑定防抖后的resize事件，250ms是调整停止后等待执行的时间
    $(window).resize(debounce(handleScreenSize, 250));
});

关键细节说明 #

• 存储原始文本：如果在大屏幕下截断了文本，当窗口缩小到小屏幕时，必须恢复完整文本，否则文本会一直是截断后的版本，这是很多人容易忽略的点。
• 防抖函数：窗口resize时会连续触发几十次事件，防抖可以让函数在调整停止后再执行，避免频繁操作DOM导致页面卡顿。
• 初始化执行：页面加载时就执行一次逻辑，确保用户刚打开页面时就适配当前屏幕尺寸，不用等到手动调整窗口。

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