实现网页选项过滤功能的教程

本文档旨在指导开发者如何实现一个简单的网页选项过滤功能。通过创建动态卡片并利用 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不会产生任何视觉效果，导致过滤功能失效。

阿里云AI平台

阿里云AI平台

下载

使用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");
}

代码解释：

1. schools 对象: 存储学校数据，包括学校名称、类别和图片。
2. 循环创建卡片: 遍历 schools.data，为每个学校创建一个卡片 div，并设置相应的 class ( card, 学校类别, hide )。 注意，初始状态所有卡片都添加了 hide class，以便于后续过滤。
3. filterSchool(value) 函数: 根据传入的 value 值过滤卡片。
   • 如果 value 是 "all"，则移除所有卡片的 hide class，显示所有卡片。
   • 否则，遍历所有卡片，如果卡片包含 value 对应的类别 class，则移除 hide class，否则添加 hide class。
4. window.onload 事件: 在页面加载完成后，调用 filterSchool("all")，默认显示所有卡片。

总结

通过以上步骤，我们就实现了一个简单的网页选项过滤功能。关键在于理解如何利用 JavaScript 动态生成HTML元素，以及如何通过CSS控制元素的显示与隐藏。 记住，一定要定义 .hide 类的样式 display: none;，否则过滤功能将无法正常工作。 你可以根据实际需求，扩展数据源和过滤条件，实现更复杂的功能。