本文档旨在指导开发者如何实现一个简单的页面选项过滤功能。通过创建动态卡片并利用 JavaScript 控制其显示与隐藏，可以根据用户选择的类别过滤页面内容。本文将详细介绍 HTML 结构、CSS 样式和 JavaScript 代码，并提供完整的示例代码和注意事项，帮助读者快速掌握该功能的实现方法。
准备工作
在开始之前，请确保你已经具备以下基础知识：
- HTML：了解 HTML 结构和常用标签。
- CSS：了解 CSS 样式和选择器。
- JavaScript：了解 JavaScript 语法和 DOM 操作。
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>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 开发技术。
