W3Schools 的 Filter Elements 示例在页面加载时所有项目默认隐藏，需点击“Show All”才显示。本文提供可靠解决方案：通过 DOMContentLoaded 事件确保 DOM 就绪后立即执行 filterSelection('all')，使页面首次加载即展示全部筛选项。
w3schools 的 filter elements 示例在页面加载时所有项目默认隐藏，需点击“show all”才显示。本文提供可靠解决方案：通过 `domcontentloaded` 事件确保 dom 就绪后立即执行 `filterselection('all')`，使页面首次加载即展示全部筛选项。
在使用 W3Schools 的「Filter Elements」交互式筛选功能时，一个常见但易被忽视的问题是：页面初次加载时所有 .filterDiv 元素均处于隐藏状态（display: none），即使「Show All」按钮已带有 active 类，内容也不会自动呈现。根本原因在于原始代码中 filterSelection("all") 被直接写在 <script></script> 标签内，而此时 HTML 中的 .filterDiv 元素尚未被浏览器解析完成——脚本提前执行，getElementsByClassName("filterDiv") 返回空集合或不完整列表，导致 show 类无法正确添加。
✅ 正确解法是将初始化调用置于 DOM 完全就绪之后：
<script>
document.addEventListener("DOMContentLoaded", function() {
filterSelection("all");
});
</script>该事件确保所有 HTML 结构（包括所有 .filterDiv 元素）已载入并构建完成，再触发筛选逻辑，从而让全部房源卡片在页面打开瞬间即可见。
⚠️ 注意事项：
-
避免使用
setTimeout延迟调用（如setTimeout(() => filterSelection("all"), 2000)）：这是不可靠的“竞态修复”，依赖猜测的毫秒数，可能因网络、设备性能差异导致失效。 -
不要将脚本置于
中且无延迟机制：否则极大概率执行时 DOM 未就绪。 -
确保
filterSelection()函数定义在调用之前：即函数声明需位于addEventListener之前（当前代码结构已满足）。
此外，建议对辅助函数名做语义优化（原示例中 w3AddClass/w3RemoveClass 可简化为 addClass/removeClass），提升可维护性；同时确认 CSS 中 .show { display: block; } 的优先级高于 .filterDiv { display: none; }（当前规则顺序已保证生效）。
最终效果：用户访问页面时，无需任何交互，所有房源即按「Show All」状态完整呈现，「Show All」按钮高亮激活，后续点击其他筛选按钮即可平滑切换——真正实现开箱即用的用户体验。
