本文档旨在指导开发者如何实现一个简单的网页选项过滤功能。通过创建动态卡片并利用 JavaScript 控制其显示与隐藏，用户可以根据预设的类别筛选内容。本文将提供完整的代码示例，并详细解释实现步骤，帮助开发者快速构建类似的功能。
搭建html结构
首先，我们需要创建一个基本的HTML结构，包括用于显示过滤选项的按钮和用于显示卡片的容器。
<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>
在上面的代码中，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;，否则过滤功能将无法正常工作。 你可以根据实际需求，扩展数据源和过滤条件，实现更复杂的功能。
评论（已关闭）
评论已关闭