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

碧海醫心

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

487人浏览过

来源于php中文网

原创

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

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

准备工作

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

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

HTML 结构

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

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

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 类，卡片将始终显示。

jQuery文字高亮过滤插件jcTextHighlighterFilter

jcTextHighlighterFilter是一款文字高亮过滤插件，可以实现用户输入字符后页面上指定区域高亮显示，当然此插件也可以部分代替浏览器自带的搜索功能。

下载

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") 函数，显示所有卡片。