本文旨在指导开发者如何实现一个基于前端的选项过滤功能。我们将通过一个学校信息展示的示例，详细讲解如何使用 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 或其他优化技术，提高页面渲染性能。用户体验： 可以添加过渡效果，使过滤过程更加平滑。
通过以上步骤，我们成功实现了一个基于前端的选项过滤功能。这个示例可以作为基础，根据实际需求进行扩展和修改，应用于各种不同的场景。
以上就是实现前端页面选项过滤功能的教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1517696.html
微信扫一扫 
支付宝扫一扫 
