本文档旨在指导开发者如何实现一个简单的页面选项过滤功能。通过创建动态卡片并利用 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 类，卡片将始终显示。
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”) 函数，显示所有卡片。
运行结果
将 HTML、CSS 和 JavaScript 代码保存到文件中，并在浏览器中打开 HTML 文件，即可看到页面选项过滤功能的效果。点击不同的按钮，页面会根据所选类别动态显示或隐藏卡片。
注意事项
确保 CSS 文件中定义了 .hide 类的样式，否则隐藏功能将无法正常工作。在 JavaScript 代码中，classList.add() 和 classList.remove() 方法用于添加和移除类名，从而控制元素的显示和隐藏。可以根据实际需求修改数据和样式，以满足不同的应用场景。
总结
通过本文的教程，你已经学会了如何实现一个简单的页面选项过滤功能。这个功能可以应用于各种网站和应用程序中，用于过滤和展示数据。希望本文能够帮助你更好地理解和掌握 Web 开发技术。
以上就是实现页面选项过滤功能的教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1517694.html
微信扫一扫 
支付宝扫一扫 
