实现页面选项过滤功能的教程-js教程-PHP中文网

实现页面选项过滤功能的教程

碧海醫心

发布： 2025-08-24 23:38:01

原创

483人浏览过

实现页面选项过滤功能的教程

本文档旨在指导开发者如何实现一个简单的页面选项过滤功能。通过创建动态卡片并利用 JavaScript 控制其显示与隐藏，可以根据用户选择的类别过滤页面内容。本文将详细介绍 HTML 结构、CSS 样式和 JavaScript 代码，并提供完整的示例代码和注意事项，帮助读者快速掌握该功能的实现方法。

准备工作

在开始之前，请确保你已经具备以下基础知识：

HTML：了解 HTML 结构和常用标签。
CSS：了解 CSS 样式和选择器。
JavaScript：了解 JavaScript 语法和 DOM 操作。

HTML 结构

首先，我们需要创建 HTML 结构。主要包含以下几个部分：

按钮区域 (buttons)：用于放置过滤选项按钮。
内容展示区域 (schools)：用于动态生成和展示卡片内容。

<div class="wrapper">
  <div id="buttons">
    <button class="button-value" onclick="filterSchool('all')">All</button>
    <button class="button-value" onclick="filterSchool('Catholic')">Catholic School</button>
    <button class="button-value" onclick="filterSchool('Regular')">Regular School</button>
    <button class="button-value" onclick="filterSchool('University')">University</button>
    <button class="button-value" onclick="filterSchool('College')">College</button>
  </div>
  <div id="schools"></div>
</div>

登录后复制

CSS 样式

接下来，我们定义 CSS 样式，用于美化页面和控制元素的显示。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  border: none;
  outline: none;
  font-family: 'Poppins', sans-serif;
}

body {
  background-color: white;
}

button {
  cursor: pointer;
}

.wrapper {
  position: absolute;
  top: 5%;
  left: 20%;
  width: 95%;
  margin: 0 auto;
}

.button-value {
  border: 2px solid black;
  padding: 0.5px 10px;
  border-radius: 3em;
  background-color: transparent;
  transition: 0.3s ease-in-out;
}

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

#schools {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-column-gap: 1.5em;
  padding: 2em 0;
}

.card {
  background-color: white;
  max-width: 18em;
  margin-top: 1em;
  padding: 1em;
  border-radius: 5px;
  box-shadow: 1em 2em 2.5em rgba(0, 0, 0, 0.19);
}

.image-container {
  text-align: center;
}

img {
  max-width: 100%;
  object-fit: contain;
  height: 15em;
}

.container {
  padding-top: 1em;
  color: black;
}

/* 关键：定义 .hide 类的样式 */
.hide {
  display: none;
}

@media screen and (max-width: 720px) {
  img {
    max-width: 100%;
    object-fit: contain;
    height: 10em;
  }
  .card {
    max-width: 10em;
    margin-top: 1em;
  }
  #schools {
    grid-template-columns: auto auto;
    grid-column-gap: 1em;
  }
}

登录后复制

重点： .hide { display: none; } 这一行代码至关重要。 JavaScript 通过添加或移除 hide 类来控制卡片的显示和隐藏。如果没有定义 hide 类，卡片将始终显示。

weenCompany闻名企业网站系统5.3.0 繁体中英文 UTF8

weenCompany闻名企业网站系统(免费开源)是一个功能强大, 使用简单的中英文企业智能建站系统, 您只需要一些基本的计算机知识就可以利用此系统完成中小型企业网站的建设; 是低成本企业网站架设方案之首选CMS系统, 也适合建设个人网站。weenCompany闻名企业网站系统功能：1. 程序代码简洁严谨, 整个系统程序仅2M左右大小.2. 中英文双语版共用一套网站程序, 双语页面实现自由切换.3

查看详情

JavaScript 代码

最后，我们编写 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);
}

// 过滤函数
function filterSchool(value) {
  let elements = document.querySelectorAll(".card");
  elements.forEach((element) => {
    if (value == "all") {
      // 显示所有卡片
      element.classList.remove("hide");
    } else {
      // 根据类别显示或隐藏卡片
      if (element.classList.contains(value)) {
        element.classList.remove("hide");
      } else {
        element.classList.add("hide");
      }
    }
  });
}

// 页面加载完成后显示所有卡片
window.onload = () => {
  filterSchool("all");
}

登录后复制

代码解释：

数据定义： schools 对象包含了学校的数据，包括学校名称、类别和图片。
动态生成卡片： for 循环遍历 schools.data 数组，为每个学校创建一个卡片元素，并设置相应的类名和内容。
过滤函数： filterSchool(value) 函数根据传入的类别值，显示或隐藏卡片。如果 value 为 "all"，则显示所有卡片。否则，只显示类别与 value 相同的卡片。
页面加载完成事件： window.onload 事件在页面加载完成后触发，调用 filterSchool("all") 函数，显示所有卡片。