如何让价格排序、月份/地点筛选功能协同生效？

你的核心问题在于筛选操作会重置所有元素的显示状态，且排序与筛选逻辑完全独立、未联动执行，同时代码存在选择器错误（排序时使用了唯一ID选择器#hero，但所有hero元素应使用类选择器.hero），导致多条件叠加时只有最后一次操作生效。

问题根源拆解 #

1. 选择器错误：排序函数中document.querySelectorAll("#hero")不符合规范——ID是唯一标识，不能重复用于多个元素，应改为类选择器.hero。
2. 逻辑无联动：当前排序仅调整DOM元素顺序，筛选仅控制元素显示/隐藏，两者完全独立。比如筛选时会重置所有元素为显示状态，直接覆盖之前的排序结果；排序时仅处理当前显示的元素，忽略被筛选隐藏的内容。
3. 状态未持久化：未保存当前的筛选和排序状态，每次操作仅处理单一条件，无法叠加多个规则。

修复后的完整代码 #

document.addEventListener("DOMContentLoaded", function () {
    // 保存当前的筛选与排序状态
    let currentSortOrder = 'defaultBtn';
    let currentMonthFilter = 'All';
    let currentLocationFilter = 'All';

    const container = document.querySelector("#hero-container");
    // 保存原始hero元素数组，避免每次从DOM重复获取
    const originalHeroArray = Array.from(document.querySelectorAll('.hero'));

    // 统一更新显示：同时应用筛选+排序规则
    function updateHeroDisplay() {
        // 复制原始数组，避免修改原数据
        let processedHeroes = [...originalHeroArray];

        // 应用月份筛选
        processedHeroes = processedHeroes.filter(hero => {
            return currentMonthFilter === 'All' || hero.dataset.month === currentMonthFilter;
        });

        // 应用地点筛选
        processedHeroes = processedHeroes.filter(hero => {
            return currentLocationFilter === 'All' || hero.dataset.location === currentLocationFilter;
        });

        // 应用排序规则
        processedHeroes.sort(function (a, b) {
            const priceA = parseInt(a.getAttribute("data-price"));
            const priceB = parseInt(b.getAttribute("data-price"));
            const dateA = new Date(a.getAttribute('data-date'));
            const dateB = new Date(b.getAttribute('data-date'));

            if (currentSortOrder === "lowToHigh") {
                return priceA - priceB;
            } else if (currentSortOrder === "highToLow") {
                return priceB - priceA;
            } else if (currentSortOrder === "defaultBtn") {
                return dateA - dateB;
            }
            return 0;
        });

        // 清空容器并重新渲染结果
        container.innerHTML = '';
        processedHeroes.forEach(hero => {
            container.appendChild(hero);
        });
    }

    // 初始化页面显示
    updateHeroDisplay();

    // 排序按钮事件处理
    const sortButtonMap = {
        'lowToHigh': 'lowToHigh',
        'highToLow': 'highToLow',
        'defaultBtn': 'defaultBtn',
        'moblh': 'lowToHigh',
        'mobhl': 'highToLow',
        'mobdef': 'defaultBtn'
    };
    Object.keys(sortButtonMap).forEach(btnId => {
        document.getElementById(btnId)?.addEventListener('click', function () {
            currentSortOrder = sortButtonMap[btnId];
            updateHeroDisplay();
        });
    });

    // 月份筛选下拉项事件处理
    document.querySelectorAll('.dropdown-item[data-month]').forEach(item => {
        item.addEventListener('click', function (e) {
            e.preventDefault();
            currentMonthFilter = this.dataset.month;
            updateHeroDisplay();
        });
    });

    // 地点筛选下拉项事件处理
    document.querySelectorAll('.dropdown-item[data-location]').forEach(item => {
        item.addEventListener('click', function (e) {
            e.preventDefault();
            currentLocationFilter = this.dataset.location;
            updateHeroDisplay();
        });
    });
});

关键修改说明 #

1. 状态持久化：用变量保存当前排序规则、月份/地点筛选条件，确保所有操作基于最新的状态组合。
2. 统一更新逻辑：所有操作（排序/筛选）仅修改状态变量，再调用updateHeroDisplay()统一执行筛选+排序，最后重新渲染结果。
3. 选择器修正：统一使用.hero类选择器获取元素，修复ID选择器的错误。
4. 数据源优化：页面加载时保存原始hero元素数组，确保筛选排序基于完整数据源，避免DOM操作干扰。
5. 事件处理简化：通过映射关系处理排序按钮，减少重复代码，提升可维护性。

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