CSS display:none相关if条件不生效 如何判断元素未隐藏执行操作

首先你的认知是正确的：jQuery 的 .show() 方法并不会强制把所有元素的 display 属性设为 block，它会恢复元素原本默认的 display 值，比如行内元素调用 .show() 后会恢复为 inline，行内块元素会恢复为 inline-block，所以你不想通过判断 display:block 来确认元素处于显示状态的思路完全没问题。

你写的这段判断代码是可以正常运行的，不过 jQuery 已经提供了更简洁、可读性更高的内置判断方式，不需要自己手动比对 css('display') 的值：

// 判断元素未隐藏的写法
if($('#startingContainer').is(':visible')){
  // 执行对应操作
  alert("completed");
}

这个 :visible 选择器的底层判断逻辑和你手写的逻辑基本一致，同时还兼容了其他元素隐藏的特殊场景，比自己手动写属性判断容错性更高。

另外针对你提到的「所有切换元素全部隐藏时展示欢迎消息」的需求，推荐你给所有需要频繁切换显示隐藏的元素统一加一个相同的自定义类名，比如 switch-element，之后你只需要统计这个类名下可见元素的数量就能快速判断状态，不用挨个对元素做判断，后续新增切换元素也不需要修改判断逻辑，维护成本更低：

// 所有需要切换的元素都加了switch-element类
if($('.switch-element:visible').length === 0) {
  // 所有切换元素都已隐藏，显示初始欢迎消息
  $('#startingContainer').show();
}

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