如何修改jQuery筛选逻辑支持多年份按钮同时选中过滤参与者卡片

不需要修改现有PHP、HTML卡片和按钮结构，仅替换原有jQuery筛选逻辑即可实现多选功能，完整代码如下：

$('.btn-year').on('click', function(){
    // 处理「全部」按钮的特殊逻辑
    if($(this).data('year') === 'all'){
        // 点击全部时清空其他按钮的激活状态，只保留全部激活
        $('.btn-year').removeClass('active');
        $(this).addClass('active');
        $('.card').show();
        return;
    }
    // 普通年份按钮：切换自身激活状态，同时取消「全部」按钮的激活
    $('.btn-year[data-year="all"]').removeClass('active');
    $(this).toggleClass('active');

    // 收集所有已激活的年份筛选值
    let activeYears = $('.btn-year.active').map(function(){
        return '.' + $(this).data('year');
    }).get();

    if(activeYears.length === 0){
        // 无选中年份时默认展示所有卡片，也可根据需求改为hide()
        $('.card').show();
    } else {
        // 拼接多类选择器，匹配任意一个选中年份的卡片都展示
        let selector = activeYears.join(',');
        $('.card').hide();
        $('.card').filter(selector).show();
    }
});

核心改动说明 #

• 原有的单选逻辑是点击按钮时清空其他所有按钮的激活状态，现在改为切换当前点击按钮的激活状态，支持同时选中多个
• 每次点击后统一收集所有已激活的年份标识，拼接为多类选择器（如.ed-2019,.ed-2020），匹配所有符合任意一个选中年份的卡片
• 保留了原有的「全部」按钮逻辑，兼容原有交互习惯

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