如何用JavaScript实现基于物种筛选显示指定图片的功能？

问题描述 #

我想实现根据下拉框筛选显示对应动物图片的功能，不确定怎么用JavaScript写。能不能通过对比下拉框选中值和图片所在卡片的data-species属性来匹配？我不清楚怎么获取图片相关属性，目标是选中值匹配时只显示对应图片。看到有人用DOMContentLoaded事件监听器，能不能指导我完成这个功能？

附HTML代码：

<main>
    
    <!-- filter bar -->
    <div class="filter">
        <label>Filter by Species:
            <select class="species-filter" name="species-filter">
                <option value="all">All</option>
                <option value="cat">Cat</option>
                <option value="dog">Dog</option>
                <option value="rabbit">Rabbit</option>
            </select>
        </label>
    </div>
    
    <!-- animal photos -->
    <section class="adoption-grid">
        <div class="animal-card" data-species="cat">
            <img src="animal1.jpg" alt="cat">
            <p class="caption">Bailey</p>
        </div>
        <div class="animal-card" data-species="rabbit">
            <img src="animal2.jpg" alt="rabbit">
            <p class="caption">Vince</p>
        </div>
        <!-- Add more animal cards as needed -->
        <div class="animal-card" data-species="turtle">
            <img src="animal3.jpg" alt="turtle">
            <p class="caption">Fifty</p>
        </div>
        <div class="animal-card" data-species="cat">
            <img src="animal4.jpg" alt="cat">
            <p class="caption">Timothy</p>
        </div>
        <div class="animal-card" data-species="cat">
            <img src="animal5.jpg" alt="cat">
            <p class="caption">Matty</p>
        </div>
        <div class="animal-card" data-species="dog">
            <img src="animal6.jpg" alt="dog">
            <p class="caption">Bella</p>
        </div>
        <div class="animal-card" data-species="dog">
            <img src="animal7.jpg" alt="dog">
            <p class="caption">Nancy</p>
        </div>
        <div class="animal-card" data-species="dog">
            <img src="animal8.jpg" alt="dog">
            <p class="caption">Darlie</p>
        </div>
        <div class="animal-card" data-species="dog">
            <img src="animal9.jpg" alt="dog">
            <p class="caption">Windie</p>
        </div>
        <div class="animal-card" data-species="dog">
            <img src="animal10.jpg" alt="dog">
            <p class="caption">Puff</p>
        </div>
        <div class="animal-card" data-species="dog">
            <img src="animal11.jpg" alt="dog">
            <p class="caption">Jelly</p>
        </div>
        <div class="animal-card" data-species="dog">
            <img src="animal12.jpg" alt="dog">
            <p class="caption">Mila</p>
        </div>

        <div class="page-selector">
            <button class="page-button active">1</button>
            <button class="page-button">2</button>
            <button class="page-button">3</button>
        </div>
    </section>
    
</main>

实现思路 #

• 用DOMContentLoaded事件确保DOM完全加载后再执行JS逻辑，避免找不到下拉框或卡片元素
• 监听下拉框的change事件，每次选中值变化时触发筛选
• 通过document.querySelectorAll('.animal-card')获取所有动物卡片
• 遍历卡片，用element.dataset.species获取卡片的data-species属性值，和下拉框选中值对比
• 根据对比结果设置卡片的display属性：匹配或选中all时显示，否则隐藏

完整JavaScript代码 #

document.addEventListener('DOMContentLoaded', function() {
    // 获取下拉框元素
    const speciesFilter = document.querySelector('.species-filter');
    // 获取所有动物卡片
    const animalCards = document.querySelectorAll('.animal-card');

    // 定义筛选函数
    function filterAnimals() {
        const selectedSpecies = speciesFilter.value;
        
        animalCards.forEach(card => {
            const cardSpecies = card.dataset.species;
            // 判断是否需要显示当前卡片
            if (selectedSpecies === 'all' || cardSpecies === selectedSpecies) {
                card.style.display = 'block'; // 若使用Grid/Flex布局，可改为对应值或移除display样式
            } else {
                card.style.display = 'none';
            }
        });
    }

    // 初始化时执行一次，确保默认显示所有
    filterAnimals();
    // 绑定下拉框的change事件
    speciesFilter.addEventListener('change', filterAnimals);
});

补充说明 #

• 如果你的卡片是Grid或Flex布局，display: block可替换为display: grid/display: flex，或者用card.style.removeProperty('display')恢复原本布局样式
• 注意HTML里有turtle卡片，但下拉框无对应选项，选中现有选项时该卡片会被隐藏，若需要可给下拉框添加turtle选项
• 若后续要结合分页功能，需在筛选后处理分页逻辑，确保只对显示的卡片进行分页

内容的提问来源于stack exchange，提问作者Birddd