可筛选DIV需点击按钮才显示全部内容的问题问询

问题说明 #

基于筛选元素示例实现按卧室数量筛选房源列表，筛选按钮功能正常，但页面首次加载时所有房源列表均隐藏；尽管「Show All」按钮处于激活状态，仍需手动点击该按钮才能显示所有内容，需求是页面加载时自动显示全部列表。

问题原因 #

当前代码中filterSelection("all")的执行时机早于房源列表元素的DOM加载完成时间——脚本块放在房源列表之前，此时.filterDiv类的元素还未被浏览器解析，导致函数无法找到目标元素并添加show类，最终列表保持隐藏状态。

解决方案 #

方法1：调整脚本位置 #

将包含筛选逻辑的脚本块移动到房源列表元素的后方，确保DOM元素加载完成后再执行筛选函数：

<div class="container" id="interior">

  <div id="myBtnContainer">
    <button class="btn active" onclick="filterSelection('all')"> Show all</button>
    <button class="btn" onclick="filterSelection('one-bed')"> 1 Bedroom</button>
    <button class="btn" onclick="filterSelection('two-bed')"> 2 Bedroom</button>
    <button class="btn" onclick="filterSelection('three-bed')"> 3 Bedroom</button>
    <button class="btn" onclick="filterSelection('four-bed')"> 4 Bedroom</button>
    <button class="btn" onclick="filterSelection('five-bed')"> 5 Bedroom</button>
  </div>

  <div class="propertyWrap">
    <!-- ACF Repeater = 1 BEDROOM -->
    <div class="propBox filterDiv one-bed">
      <a class="propImg response" href="#" target="_self">
        <img src="https://placehold.co/100x100.jpg" alt="beach house" />
      </a>
      <div class="propInfo">
        <p>Site #1234<br /> 1 Beds | 2 Baths | Sleeps 6<br /> Annual Lot Lease: $999</p>
      </div>
    </div>
    <!-- 其余房源项省略 -->
  </div>

  <!-- 脚本移至房源列表后方 -->
  <script>
    filterSelection("all")

    function filterSelection(c) {
      var x, i;
      x = document.getElementsByClassName("filterDiv");
      if (c == "all") c = "";
      for (i = 0; i < x.length; i++) {
        w3RemoveClass(x[i], "show");
        if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
      }
    }

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

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

    // 按钮激活状态逻辑
    var btnContainer = document.getElementById("myBtnContainer");
    var btns = btnContainer.getElementsByClassName("btn");
    for (var i = 0; i < btns.length; i++) {
      btns[i].addEventListener("click", function() {
        var current = document.getElementsByClassName("active");
        current[0].className = current[0].className.replace(" active", "");
        this.className += " active";
      });
    }
  </script>

</div>

方法2：使用DOM加载完成事件 #

保持脚本位置不变，将filterSelection("all")包裹在DOMContentLoaded事件监听中，确保DOM完全解析后再执行筛选：

document.addEventListener('DOMContentLoaded', function() {
  filterSelection("all");
});

// 以下函数保持不变
function filterSelection(c) { ... }
function w3AddClass(element, name) { ... }
function w3RemoveClass(element, name) { ... }
// 按钮激活状态逻辑...

方法3：初始添加show类（可选） #

直接在HTML中给所有.filterDiv元素添加show类，作为初始显示状态，后续筛选函数会正常切换该类的存在：

<div class="propBox filterDiv show one-bed">...</div>
<div class="propBox filterDiv show two-bed">...</div>
<!-- 所有房源项均添加show类 -->

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