W3Schools 的 Filter Elements 示例在页面初次加载时所有项目默认隐藏，需手动点击“Show All”才显示。本文提供可靠解决方案：通过 DOMContentLoaded 事件确保 DOM 就绪后立即执行 filterSelection('all')，使页面启动即呈现全部列表。

w3schools 的 filter elements 示例在页面初次加载时所有项目默认隐藏，需手动点击“show all”才显示。本文提供可靠解决方案：通过 `domcontentloaded` 事件确保 dom 就绪后立即执行 `filterselection('all')`，使页面启动即呈现全部列表。

在使用 W3Schools 提供的 JavaScript 过滤器（如按卧室数量筛选房源）时，一个常见问题是：尽管“Show All”按钮默认带有 active 类，但页面首次加载时所有 .filterDiv 元素仍处于隐藏状态（因 CSS 中 .filterDiv { display: none; } 生效，且初始化调用 filterSelection("all") 执行过早——此时 DOM 尚未完全解析，导致元素未被正确匹配和显示）。

✅ 正确解决方案：等待 DOM 就绪后再触发初始化

将初始调用 filterSelection("all") 移入 DOMContentLoaded 事件监听器中，确保所有 HTML 元素已载入并可被 JavaScript 访问：

<script>
  document.addEventListener("DOMContentLoaded", function() {
    filterSelection("all");
  });

  function filterSelection(c) {
    const x = document.getElementsByClassName("filterDiv");
    const targetClass = c === "all" ? "" : c;

    for (let i = 0; i < x.length; i++) {
      removeClass(x[i], "show");
      if (x[i].className.indexOf(targetClass) > -1) {
        addClass(x[i], "show");
      }
    }
  }

  function addClass(element, name) {
    const arr1 = element.className.split(" ");
    const arr2 = name.split(" ");
    for (let i = 0; i < arr2.length; i++) {
      if (arr1.indexOf(arr2[i]) === -1) {
        element.className += " " + arr2[i];
      }
    }
  }

  function removeClass(element, name) {
    const arr1 = element.className.split(" ");
    const arr2 = name.split(" ");
    for (let i = 0; i < arr2.length; i++) {
      let index;
      while ((index = arr1.indexOf(arr2[i])) > -1) {
        arr1.splice(index, 1);
      }
    }
    element.className = arr1.join(" ").trim();
  }

  // 按钮高亮逻辑（保持不变）
  const btnContainer = document.getElementById("myBtnContainer");
  const btns = btnContainer?.getElementsByClassName("btn") || [];
  for (let i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function() {
      const current = document.getElementsByClassName("active");
      if (current[0]) {
        current[0].className = current[0].className.replace(" active", "");
      }
      this.className += " active";
    });
  }
</script>

⚠️ 注意事项与最佳实践

• 避免 setTimeout 硬延迟：如 setTimeout(() => filterSelection("all"), 2000) 是不可靠的——它依赖猜测的加载时间，易受网络、设备性能或动态内容（如 ACF Repeater 渲染）影响，属于竞态条件（race condition），应杜绝。
• 确保脚本位置合理：将上述 <script></script> 放置于