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

本文旨在指导开发者如何实现一个基于前端的选项过滤功能。我们将通过一个学校信息展示的示例，详细讲解如何使用 JavaScript 和 CSS 来动态地显示和隐藏页面元素，从而实现按类别过滤学校的功能。本文将涵盖数据结构设计、HTML 结构搭建、JavaScript 逻辑编写以及 CSS 样式设置等方面，帮助读者快速掌握前端过滤功能的实现方法。

1. 数据结构的设计

首先，我们需要定义用于存储学校信息的数据结构。在这个例子中，我们使用一个 JavaScript 对象 schools，其中包含一个 data 数组。数组中的每个元素都是一个对象，代表一个学校，包含 schoolName（学校名称）、category（类别）和 image（图片链接）三个属性。

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"
    },
  ],
};

2. 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>

3. JavaScript 逻辑的编写

JavaScript 代码负责动态生成学校信息卡片，并实现过滤功能。

立即学习“前端免费学习笔记（深入）”；

3.1 生成学校信息卡片

使用 for...of 循环遍历 schools.data 数组，为每个学校创建一个卡片元素，并将其添加到 #schools 区域。

元典智库

元典智库：智能开放的法律搜索引擎

下载

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);
}

3.2 实现过滤功能

filterSchool 函数接收一个 value 参数，表示要过滤的类别。该函数遍历所有卡片元素，根据卡片是否包含指定的类别，添加或移除 hide 类，从而实现显示和隐藏的效果。

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");
      }
    }
  });
}

3.3 页面加载完成时显示所有卡片

使用 window.onload 事件监听器，在页面加载完成后调用 filterSchool("all")，确保默认显示所有学校信息。

window.onload = () => {
  filterSchool("all");
}

4. CSS 样式的设置

CSS 样式用于美化页面，并实现隐藏效果。

• .hide 类: 设置 display: none;，用于隐藏元素。这是实现过滤功能的核心。

.hide {
  display: none;
}

• 其他样式用于美化页面，例如设置卡片布局、按钮样式等。

* {
  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;
}

@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;
  }
}

5. 总结与注意事项

• CSS hide 类的定义至关重要： 缺少.hide { display: none; }会导致过滤功能失效。
• 代码可维护性： 建议将 JavaScript 代码进行模块化，提高代码的可读性和可维护性。
• 性能优化： 对于大量数据，可以考虑使用虚拟 DOM 或其他优化技术，提高页面渲染性能。
• 用户体验： 可以添加过渡效果，使过滤过程更加平滑。

通过以上步骤，我们成功实现了一个基于前端的选项过滤功能。这个示例可以作为基础，根据实际需求进行扩展和修改，应用于各种不同的场景。