只使用javascript和css：我可以让用户通过一个下拉菜单来选择性地显示和隐藏不同类的div吗？

ijxebb2r 于 2023-02-14 发布在 Java

关注(0)|答案(1)|浏览(76)

我有一个html页面，由80 - 100个css风格的div组成，每个div都包含一个网格，网格中有一幅图片和关于一幅作品的信息（每个div都有一个唯一的id，以便链接到页面中的特定位置）。
许多作品使用几种媒体，我希望用户能够使可见的只有艺术品，使用特定的媒体。
换句话说，我想让html页面表现得像一个可过滤的数据库，其中一个下拉菜单就像一个过滤器列表，点击"使用视频的艺术作品"选项（例如）隐藏所有不使用视频的作品。

我想实现上述与css和Javascript只. *

我的理解是：
我可以通过分配不同的类来使我的艺术作品div可选，比如". med-drawing"". med-video"". med-sound"等。需要有10 - 12个这样的类。
然后，我需要一种方法，onClick，来"* 使 * 所有 * 确实 * 有 * 的div可见"一个特定的类，并且"* 使 * 没有 * 的div不可见"那个类。这适用于10 - 12个不同类中的每一个。
我已经尝试了一系列的Javascript "onClick + GetElementsByClass +[some visibility control]"函数，这些函数被分配给菜单中的不同元素。我的javascript编码知识有限，到目前为止，我还不能让任何东西工作。
我真正需要的是一个基本的javascript/css解决方案，我可以修改它来适应我的项目。
我会很感激任何帮助。

css

来源：https://stackoverflow.com/questions/75440273/using-only-javascript-and-css-can-i-enable-the-user-to-selectively-display-and

1条答案

按热度按时间

wpcxdonn1#

为了让您开始，一种方法是：
根据内容类型为每个div添加一个公共类名和一个data属性。例如：

<div class="grid-item" data-type="text">
    <span>Text</span>
  </div>

  <div class="grid-item" data-type="audio">
    <span>Audio</span>
  </div>

一旦你有了这个，你可以添加一个选择框，其中将包含与data-type值相同的选项。

<select id="cstm-select" name="filter">
  <option value="text">Text</option>
  <option value="image">Image</option>
  <option value="audio">Audio</option>
  <option value="video">Video</option>
</select>

如果您看到上面的代码，value of选项包含不同的data-type属性值，我们将使用这些值来过滤内容。
现在对于js逻辑，首先我们需要监听select元素的onChange事件，将选择的值存储在一个变量中，然后在用户使用document.querySelectorAll()函数选择一个选项时查询元素，并将公共类名作为函数参数传递，以便只选择需要过滤的元素。
查询完成后，我们可以使用forEach遍历每个元素，然后检查每个元素的data-type属性是否与所选的过滤器值匹配，如果不匹配，则向元素添加一个类名，以控制元素的可见性。
此外，我们需要确保如果data-type匹配，则删除类名，以便在用户选择不同的过滤器时可以看到该元素。
结合这一点，这里是一个小提琴。修改代码为您的项目需要。
一个一个二个一个一个一个三个一个一个一个一个一个四个一个

赞(0）回复(0）举报 2023-02-14

我来回答

只使用javascript和css：我可以让用户通过一个下拉菜单来选择性地显示和隐藏不同类的div吗？

1条答案

相关问题

热门标签

最新问答