本文介绍如何使用 JavaScript 在页面加载完成后，根据下拉选择器的值动态显示或隐藏带有对应 data-species 属性的动物卡片，从而实现精准的前端图像筛选。
本文介绍如何使用 javascript 在页面加载完成后，根据下拉选择器的值动态显示或隐藏带有对应 `data-species` 属性的动物卡片，从而实现精准的前端图像筛选。
要实现“仅显示与所选物种匹配的图片”，核心在于：监听用户选择变化 → 获取筛选值 → 遍历所有动物卡片 → 比对 data-species 属性 → 动态控制显隐。整个流程需确保 DOM 完全就绪后再执行，因此推荐使用 DOMContentLoaded 事件。
✅ 正确实现步骤
- 等待 DOM 加载完成：避免因元素未就绪导致查询失败；
-
获取关键元素：筛选下拉框（
.species-filter）和所有动物卡片（.animal-card）； -
绑定
change事件监听器：响应用户选项切换； -
逐项比对并控制显示状态：利用
dataset.species读取自定义数据属性，结合display: block/none控制可见性。
? 示例代码（推荐嵌入 <script></script> 标签或外部 JS 文件）
document.addEventListener("DOMContentLoaded", function() {
const speciesFilter = document.querySelector('.species-filter');
const animalCards = document.querySelectorAll('.animal-card');
speciesFilter.addEventListener('change', function() {
const selectedValue = this.value; // 等价于 speciesFilter.value
animalCards.forEach(card => {
const cardSpecies = card.dataset.species;
// 显示条件：选择 "all" 或物种完全匹配
if (selectedValue === 'all' || selectedValue === cardSpecies) {
card.style.display = 'block';
} else {
card.style.display = 'none';
}
});
});
// 【可选】初始化时自动触发一次，确保默认视图正确（如默认选中 "all"）
speciesFilter.dispatchEvent(new Event('change'));
});
⚠️ 注意事项与优化建议
-
CSS 兼容性：
display: none会彻底移除元素布局空间，若需保留占位或过渡动画，可改用visibility: hidden或配合 CSS 类（如.hidden { opacity: 0; pointer-events: none; }）； - 性能考量：当前方案适用于百级以内卡片；若数据量极大（如数百张图），建议结合虚拟滚动或分页逻辑；
-
扩展性增强：可将筛选逻辑封装为函数（如
filterBySpecies(value)），便于后续支持多维度筛选（如年龄、性别）； -
无障碍访问：确保
<select></select>具有明确的label（当前 HTML 已满足），且筛选后焦点管理合理（例如聚焦到首张可见卡片）； -
健壮性补充：可增加空值校验（如
if (!card.dataset.species)跳过无属性卡片），避免潜在报错。
该方案轻量、语义清晰、无需依赖第三方库，是现代前端筛选交互的经典实践。只需确保 HTML 中每个 .animal-card 正确设置 data-species 值，即可开箱即用。
