jQuery技术问题：窗口尺寸变化时无需刷新增删container类

嘿，这个问题太常见啦！你当前的代码只在页面首次加载（$(document).ready）时执行一次判断，所以窗口大小改变后必须刷新页面才会生效。咱们可以通过监听窗口的resize事件来实现实时响应，甚至加上防抖优化来避免频繁触发回调，提升性能。

实现方案 #

核心思路是：

• 把判断类名的逻辑抽成独立函数，方便复用
• 页面加载时先执行一次函数，确保初始状态正确
• 监听窗口resize事件，每次窗口大小变化时触发判断函数（加防抖优化）

完整代码示例：

$(document).ready(function() {
  // 抽离判断逻辑为独立函数，方便复用
  function toggleContainerClass() {
    const targetElement = $('.intro > ul');
    if ($(window).width() > 1183) {
      targetElement.removeClass('container');
    } else {
      targetElement.addClass('container');
    }
  }

  // 页面加载完成后先执行一次，保证初始状态正确
  toggleContainerClass();

  // 监听窗口resize事件，加入防抖避免频繁触发
  let resizeTimer;
  $(window).on('resize', function() {
    clearTimeout(resizeTimer);
    // 窗口停止调整200ms后再执行判断，可根据需求调整延迟时间
    resizeTimer = setTimeout(toggleContainerClass, 200);
  });
});

为什么加防抖？ #

窗口拖动调整大小时，resize事件会连续触发几十甚至上百次，如果每次都执行DOM操作会浪费性能。防抖的作用是让函数只在窗口停止调整一段时间后才执行，减少不必要的DOM操作，让页面更流畅。

简化版（无防抖） #

如果你的页面不需要考虑极致性能，也可以直接绑定事件去掉防抖：

$(document).ready(function() {
  function toggleContainerClass() {
    const targetElement = $('.intro > ul');
    $(window).width() > 1183 ? targetElement.removeClass('container') : targetElement.addClass('container');
  }

  toggleContainerClass();
  $(window).on('resize', toggleContainerClass);
});

这样修改后，窗口大小变化时会自动触发类的添加/移除操作，完全不需要刷新浏览器啦！

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