jQuery的if/else语句仅执行首个if分支，其余分支不生效是什么原因

核心原因：判断条件的顺序逻辑错误 #

• 你当前的判断逻辑是先判断screen.width < 992，所有数值小于992的情况都会优先命中第一个if分支，包括本应该走else if的小于425的场景，自然不会进入后续的else if、else分支。
• 区间判断需要遵循从窄到宽的顺序，数值越小、限制越严格的条件要放在最前面。

其他可能的影响因素 #

• 你使用的screen.width是设备屏幕的物理总宽度，不会随浏览器窗口缩放变化，如果你需要的是判断当前浏览器视口宽度，应该替换为window.innerWidth。
• 如果你的逻辑是希望页面尺寸变化时自动触发判断，需要将这段逻辑绑定到resize事件中，否则只会在页面初次加载时执行一次。

修正后的代码示例 #

// 先判断更严格的小数值区间
if (screen.width < 425) {
  alert('Less than 425');
  $("#res_img").toggleClass('col-5 col-12');
  $("#res_img_two").toggleClass('col-7 col-12');
} else if (screen.width < 992) {
  alert('Less than 992');
  $("#res_img").toggleClass('col-lg-6 col-lg-5');
  $("#res_img_two").toggleClass('col-lg-6 col-lg-7');
} else {
  console.log('success');
}

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