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