页面内院校选项过滤器脚本失效求助

核心问题 #

你的代码逻辑本身无语法错误，但CSS中未定义.hide类的隐藏规则，导致JavaScript添加/移除该类时，元素视觉上没有任何变化，这是隐藏功能失效的根本原因。

修复步骤 #

1. 补充.hide类的CSS样式 #

在你的CSS代码末尾添加以下规则：

.hide {
  display: none !important;
}

使用!important是为了强制覆盖网格布局中.card默认的display属性，确保元素能被彻底隐藏。

2. 可选：优化按钮状态反馈（提升用户体验） #

当前按钮仅通过focus状态提示选中，切换分类时用户无法直观感知当前选中项，可添加专属激活样式：

• CSS新增：

.button-value.active {
  background-color: black;
  color: white;
}

• 修改JavaScript的filterSchool函数，同步按钮状态：

function filterSchool(value) {
  // 重置所有按钮的激活状态
  document.querySelectorAll(".button-value").forEach(btn => btn.classList.remove("active"));
  // 给当前点击的按钮添加激活类
  document.querySelector(`.button-value[onclick="filterSchool('${value}')"]`).classList.add("active");

  let elements = document.querySelectorAll(".card");
  elements.forEach((element) => {
    if (value == "all") {
      element.classList.remove("hide");
    } else {
      element.classList.contains(value) 
        ? element.classList.remove("hide") 
        : element.classList.add("hide");
    }
  });
}

• 初始化时激活默认按钮：

window.onload = () => {
  filterSchool("all");
  document.querySelector(".button-value").classList.add("active");
};

3. 可选：改用事件委托（规范代码结构） #

当前通过onclick绑定全局函数，可改为事件委托减少全局变量依赖：

• 修改HTML，移除按钮的onclick属性，改用data-*存储分类值：

<div class="wrapper">
  <div id="buttons">
    <button class="button-value" data-category="all">All</button>
    <button class="button-value" data-category="Catholic">Catholic School</button>
    <button class="button-value" data-category="Regular">Regular School</button>
    <button class="button-value" data-category="University">University</button>
    <button class="button-value" data-category="College">College</button>
  </div>
  <div id="schools"></div>
</div>

• 重构JavaScript逻辑：

// 卡片创建逻辑保持不变
let schools = {
  data: [{
      schoolName: "Edmonton Catholic School District",
      category: "Catholic",
      image: "ecsd.png"
    },
    {
      schoolName: "Edmonton Public School",
      category: "Regular",
      image: "publicimg.jpg"
    },
    {
      schoolName: "Northern Alberta Institution of Technology",
      category: "College",
      image: "NAIT.png"
    },
    {
      schoolName: "University of Alberta",
      category: "University",
      image: "University-of-Alberta.png"
    },
  ],
};

// 初始化卡片
for (let i of schools.data) {
  let card = document.createElement("div");
  card.classList.add("card", i.category, "hide");
  
  let imgContainer = document.createElement("div");
  imgContainer.classList.add("image-container");
  let image = document.createElement("img");
  image.setAttribute("src", i.image);
  imgContainer.appendChild(image);
  card.appendChild(imgContainer);

  let container = document.createElement("div");
  container.classList.add("container");
  let name = document.createElement("h5");
  name.classList.add("school-name");
  name.innerText = i.schoolName.toUpperCase();
  container.appendChild(name);

  card.appendChild(container);
  document.getElementById("schools").appendChild(card);
}

// 事件委托处理按钮点击
document.getElementById("buttons").addEventListener("click", (e) => {
  if (!e.target.classList.contains("button-value")) return;
  
  const value = e.target.dataset.category;
  
  // 同步按钮激活状态
  document.querySelectorAll(".button-value").forEach(btn => btn.classList.remove("active"));
  e.target.classList.add("active");

  // 执行过滤逻辑
  document.querySelectorAll(".card").forEach(element => {
    if (value === "all") {
      element.classList.remove("hide");
    } else {
      element.classList.contains(value) 
        ? element.classList.remove("hide") 
        : element.classList.add("hide");
    }
  });
});

// 页面加载完成后初始化显示
window.onload = () => {
  document.querySelector(".button-value").click();
};

验证效果 #

添加.hide类的CSS规则后，点击分类按钮即可看到对应卡片正常显示/隐藏，过滤器功能恢复正常。

内容的提问来源于stack exchange，提问作者Pham Tran Le Gia