仅用JavaScript和CSS能否通过单一下拉菜单筛选显示/隐藏不同类div？

核心思路 #

利用data-*属性存储艺术品的媒介信息，通过下拉菜单的选择事件结合CSS类控制元素显隐，实现高效筛选。

1. HTML 结构 #

<!-- 筛选下拉菜单 -->
<select id="mediaFilter">
  <option value="all">所有艺术品</option>
  <option value="video">使用视频的艺术品</option>
  <option value="painting">绘画类艺术品</option>
  <option value="sculpture">雕塑类艺术品</option>
  <!-- 可按需添加更多媒介选项 -->
</select>

<!-- 艺术品网格容器 -->
<div class="art-grid">
  <!-- 示例艺术品div，支持多媒介标记 -->
  <div class="art-item" data-media="video painting" id="art-1">
    <img src="art1.jpg" alt="艺术品1">
    <p>名称：XX作品 | 媒介：视频、绘画</p>
  </div>
  <div class="art-item" data-media="sculpture" id="art-2">
    <img src="art2.jpg" alt="艺术品2">
    <p>名称：XX作品 | 媒介：雕塑</p>
  </div>
  <!-- 更多艺术品div... -->
</div>

2. CSS 样式 #

/* 默认显示所有艺术品 */
.art-item {
  display: block;
  /* 保留你原有网格布局样式 */
}

/* 隐藏类，用于控制筛选后的不可见元素 */
.art-item.hidden {
  display: none;
}

3. JavaScript 逻辑 #

// 获取筛选菜单和所有艺术品元素
const filterSelect = document.getElementById('mediaFilter');
const artItems = document.querySelectorAll('.art-item');

// 监听下拉菜单选择变化
filterSelect.addEventListener('change', function() {
  const selectedMedia = this.value;

  artItems.forEach(item => {
    // 将当前艺术品的媒介转为数组
    const itemMedias = item.dataset.media.split(' ');
    
    // 匹配选中媒介则显示，否则隐藏
    if (selectedMedia === 'all' || itemMedias.includes(selectedMedia)) {
      item.classList.remove('hidden');
    } else {
      item.classList.add('hidden');
    }
  });
});

定制说明 #

• 新增媒介：只需在下拉菜单添加<option>，并在对应艺术品的data-media属性中补充关键词（多媒介用空格分隔）。
• 关于旧方案失败原因：你之前用getElementsByClass的思路，无法灵活处理一件作品对应多种媒介的场景，而data-*属性支持多值存储，更适配你的需求。
• 性能说明：80-100个元素的遍历操作完全无性能压力，无需额外优化。

内容的提问来源于stack exchange，提问作者Dr No Know