jQuery场景下JS嵌套if语句不生效排查及优化方案

你遇到的内层if分支完全不执行、语法检测无报错、外层逻辑正常运行的问题，根本原因是宽度判断逻辑中调用jQuery的width()方法时漏写了执行括号：

• 错误写法通常为if($(window).width < 651)，这里的$(window).width是对函数本身的引用，属于对象类型，和数字值做比较时会被隐式转换为NaN，所有比较结果都为false，自然不会进入任何内层分支。
• 这个错误属于逻辑错误而非语法错误，所以通用语法校验工具无法识别，且外层库存判断逻辑不涉及这段错误代码，因此可以正常运行。
• 小概率诱因是内层if的大括号配对错位、宽度判断的区间边界写反，但这类问题通常语法检测或控制台会抛出异常，和你描述的现象匹配度很低。

不要在JS里硬写多层if嵌套+直接修改样式，把状态判断和样式渲染解耦是更易维护、性能更好的方案，具体实现如下：

核心思路 #

• JS只负责识别两个核心状态：当前选中规格的库存状态、当前屏幕对应的设备类型，把状态以类名的形式挂载到sticky栏的DOM节点上
• 所有高度、边距、显隐逻辑全交给CSS媒体查询实现，不用在JS里硬编码样式值，天然适配窗口缩放、屏幕旋转场景，也不会出现手写宽度判断的边界错误
• 复用DOM查询、状态计算逻辑，减少重复代码，消除多层if嵌套

参考实现代码 #

JS部分 #

// 提前缓存DOM节点，避免每次触发事件都重复查询DOM
const $sizeSelector = $('#pa_size');
const $stickyBar = $('.sticky-atc-bar');
const $cartBtn = $stickyBar.find('.add-to-cart-btn');

// 统一的UI更新逻辑，初始化、规格切换、窗口缩放时都调用这个函数
function updateStickyUI() {
  // 1. 处理库存状态
  const selectedStockStatus = $sizeSelector.find(':selected').attr('stock-status');
  const isInStock = selectedStockStatus === 'instock'; // 按你实际的属性值调整判断规则
  $cartBtn.toggle(isInStock);

  // 2. 用原生matchMedia判断设备类型，比手写宽度区间判断更可靠，无滚动条宽度误差
  let deviceType = 'desktop';
  if (window.matchMedia('(max-width: 650px)').matches) {
    deviceType = 'mobile';
  } else if (window.matchMedia('(max-width: 980px)').matches) {
    deviceType = 'tablet';
  }

  // 3. 挂载状态类，移除旧状态避免冲突
  $stickyBar.removeClass('stock-in stock-out device-mobile device-tablet device-desktop')
    .addClass(`stock-${isInStock ? 'in' : 'out'} device-${deviceType}`);
}

// 绑定事件
$sizeSelector.on('change', updateStickyUI);
$(window).on('resize', updateStickyUI);
// 页面首次加载完成执行一次初始化
$(updateStickyUI);

CSS部分 #

/* 库存状态对应样式 */
.sticky-atc-bar.stock-out .add-to-cart-btn {
  display: none;
}

/* 移动端（<651px）对应样式 */
.sticky-atc-bar.device-mobile {
  height: 60px;
}
.sticky-atc-bar.device-mobile .cart-module {
  margin-top: 8px;
}

/* 平板端（651px-980px）对应样式 */
.sticky-atc-bar.device-tablet {
  height: 80px;
}
.sticky-atc-bar.device-tablet .cart-module {
  margin-top: 16px;
}

/* 桌面端（≥981px）对应样式 */
.sticky-atc-bar.device-desktop {
  height: 100px;
}
.sticky-atc-bar.device-desktop .cart-module {
  margin-top: 24px;
}

方案优势 #

• 无多层嵌套逻辑，代码可读性高，后续调整尺寸阈值、样式值不需要动JS逻辑，直接改CSS即可
• 用原生matchMedia做宽度判断，不会出现手动计算宽度的滚动条误差、边界值漏判问题
• 绑定了resize事件，窗口缩放、屏幕旋转时会自动更新UI，适配性更强
• 提前缓存DOM节点，减少不必要的DOM查询，性能比每次分支里重复写选择器更好

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