本文旨在指导开发者如何实现一个基于前端的选项过滤功能。我们将通过一个学校信息展示的示例，详细讲解如何使用 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): 用于动态生成并展示学校信息卡片。
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 或其他优化技术，提高页面渲染性能。
- 用户体验： 可以添加过渡效果，使过滤过程更加平滑。
通过以上步骤，我们成功实现了一个基于前端的选项过滤功能。这个示例可以作为基础，根据实际需求进行扩展和修改，应用于各种不同的场景。
