本文档旨在指导开发者如何实现一个简单的网页选项过滤功能。通过创建动态卡片并利用 JavaScript 控制其显示与隐藏，用户可以根据预设的类别筛选内容。本文将提供完整的代码示例，并详细解释实现步骤，帮助开发者快速构建类似的功能。
搭建HTML结构
首先，我们需要创建一个基本的HTML结构，包括用于显示过滤选项的按钮和用于显示卡片的容器。
在上面的代码中，wrapper div 用于整体布局，buttons div 包含过滤按钮，每个按钮都绑定了 filterSchool() 函数，并传入相应的过滤值。schools div 是用于动态添加卡片的容器。
使用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; } 这条CSS规则至关重要。filterSchool()函数通过添加或移除hide class 来控制元素的显示与隐藏。如果未定义.hide class，则添加该class不会产生任何视觉效果，导致过滤功能失效。
使用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) { //Create Card let card = document.createElement("div"); //Card category and should be hidden card.classList.add("card", i.category, "hide"); //Image div let imgContainer = document.createElement("div"); imgContainer.classList.add("image-container"); //img tag let image = document.createElement("img"); image.setAttribute("src", i.image); imgContainer.appendChild(image); card.appendChild(imgContainer); //container let container = document.createElement("div"); container.classList.add("container"); //School name 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 对象: 存储学校数据，包括学校名称、类别和图片。循环创建卡片: 遍历 schools.data，为每个学校创建一个卡片 div，并设置相应的 class ( card, 学校类别, hide )。 注意，初始状态所有卡片都添加了 hide class，以便于后续过滤。filterSchool(value) 函数: 根据传入的 value 值过滤卡片。如果 value 是 “all”，则移除所有卡片的 hide class，显示所有卡片。否则，遍历所有卡片，如果卡片包含 value 对应的类别 class，则移除 hide class，否则添加 hide class。window.onload 事件: 在页面加载完成后，调用 filterSchool(“all”)，默认显示所有卡片。
总结
通过以上步骤，我们就实现了一个简单的网页选项过滤功能。关键在于理解如何利用 JavaScript 动态生成HTML元素，以及如何通过CSS控制元素的显示与隐藏。 记住，一定要定义 .hide 类的样式 display: none;，否则过滤功能将无法正常工作。 你可以根据实际需求，扩展数据源和过滤条件，实现更复杂的功能。
以上就是实现网页选项过滤功能的教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1517779.html
微信扫一扫 
支付宝扫一扫 
