页面筛选功能实现教程详解

想要实现页面选项过滤功能吗？本文将为你提供一份详细的实现教程，手把手教你利用HTML、CSS和JavaScript构建动态卡片，并根据用户选择的类别进行内容过滤。**页面选项过滤实现教程详解：** 本文将深入解析HTML结构搭建、CSS样式美化以及JavaScript代码逻辑，包括动态卡片生成、`hide`类控制元素显隐等关键步骤。通过学习本文，你将掌握如何创建交互式页面，提升用户体验，让页面内容展示更灵活、更高效。无论你是Web开发新手还是有一定经验的开发者，都能从中受益，快速掌握页面选项过滤功能的实现技巧，并应用到实际项目中。快来一起学习吧！

本文档旨在指导开发者如何实现一个简单的页面选项过滤功能。通过创建动态卡片并利用 JavaScript 控制其显示与隐藏，可以根据用户选择的类别过滤页面内容。本文将详细介绍 HTML 结构、CSS 样式和 JavaScript 代码，并提供完整的示例代码和注意事项，帮助读者快速掌握该功能的实现方法。

准备工作

在开始之前，请确保你已经具备以下基础知识：

• HTML：了解 HTML 结构和常用标签。
• CSS：了解 CSS 样式和选择器。
• JavaScript：了解 JavaScript 语法和 DOM 操作。

HTML 结构

首先，我们需要创建 HTML 结构。主要包含以下几个部分：

1. 按钮区域 (buttons)：用于放置过滤选项按钮。
2. 内容展示区域 (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");
}

代码解释：

1. 数据定义： schools 对象包含了学校的数据，包括学校名称、类别和图片。
2. 动态生成卡片： for 循环遍历 schools.data 数组，为每个学校创建一个卡片元素，并设置相应的类名和内容。
3. 过滤函数： filterSchool(value) 函数根据传入的类别值，显示或隐藏卡片。 如果 value 为 "all"，则显示所有卡片。 否则，只显示类别与 value 相同的卡片。
4. 页面加载完成事件： window.onload 事件在页面加载完成后触发，调用 filterSchool("all") 函数，显示所有卡片。

运行结果

将 HTML、CSS 和 JavaScript 代码保存到文件中，并在浏览器中打开 HTML 文件，即可看到页面选项过滤功能的效果。点击不同的按钮，页面会根据所选类别动态显示或隐藏卡片。

注意事项

• 确保 CSS 文件中定义了 .hide 类的样式，否则隐藏功能将无法正常工作。
• 在 JavaScript 代码中，classList.add() 和 classList.remove() 方法用于添加和移除类名，从而控制元素的显示和隐藏。
• 可以根据实际需求修改数据和样式，以满足不同的应用场景。

总结

通过本文的教程，你已经学会了如何实现一个简单的页面选项过滤功能。这个功能可以应用于各种网站和应用程序中，用于过滤和展示数据。希望本文能够帮助你更好地理解和掌握 Web 开发技术。

本篇关于《页面筛选功能实现教程详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！