JS类名过滤器开发 多按钮控制元素显隐最小改动方案求助

问题根因 #

原有逻辑直接操作元素的display属性切换显隐，没有记录元素被不同筛选规则命中的隐藏状态，导致同时匹配多个筛选规则的元素（比如同时带filter01和filter02的ElementX）会被后触发的按钮直接覆盖显隐状态，不符合预期。另外原代码存在两处语法笔误，会导致运行报错：

• filter01、filter02函数中设置按钮颜色时，rgb(200,200,200)后缺少闭合引号
• filter02函数中误将button02写为button，会触发未定义变量错误
• 原代码未主动获取按钮元素，直接使用button01/button02变量存在兼容性问题（仅元素设为同名id时才会被全局自动识别）

实现思路 #

完全保留原有HTML结构、函数入口和单类名元素的筛选逻辑，仅新增元素级的隐藏状态标记：

• 对每个筛选元素，分别记录是否被filter01、filter02规则要求隐藏
• 元素最终显隐判断规则：只要被任意一个关联筛选规则标记为隐藏，就保持display: none；只有所有关联筛选规则都未标记隐藏时，才恢复显示
• 按钮激活状态（灰色）和对应筛选规则的激活状态保持同步

修正后完整代码 #

HTML（仅可选删除末尾多余的</a>标签，其余无需改动） #

<div class="button01" onclick="filter01()">Filter 01</div>
<div class="button02" onclick="filter02()">Filter 02</div>

<div class="filter01 filter02">ElementX</div>

JS代码（基于原有逻辑修改，改动量极小） #

// 获取按钮元素，修复原代码变量未定义的问题
const button01 = document.querySelector('.button01');
const button02 = document.querySelector('.button02');

function filter01() {
    var i;
    var filter = document.getElementsByClassName("filter01");
    // 切换当前筛选规则的激活状态
    const isActive = button01.style.color === "rgb(200,200,200)";
    button01.style.color = isActive ? null : "rgb(200,200,200)";

    for (i=0; i<filter.length; i++) {
        // 记录当前元素是否被filter01标记隐藏
        filter[i].dataset.hideBy01 = isActive ? 'false' : 'true';
        // 只要被任意一个筛选规则标记隐藏，就保持隐藏
        if (filter[i].dataset.hideBy01 === 'true' || filter[i].dataset.hideBy02 === 'true') {
            filter[i].style.display = "none";
        } else {
            filter[i].style.display = null;
        }
    }
}
function filter02() {
    var i;
    var filter = document.getElementsByClassName("filter02");
    // 切换当前筛选规则的激活状态
    const isActive = button02.style.color === "rgb(200,200,200)";
    button02.style.color = isActive ? null : "rgb(200,200,200)";

    for (i=0; i<filter.length; i++) {
        // 记录当前元素是否被filter02标记隐藏
        filter[i].dataset.hideBy02 = isActive ? 'false' : 'true';
        // 只要被任意一个筛选规则标记隐藏，就保持隐藏
        if (filter[i].dataset.hideBy01 === 'true' || filter[i].dataset.hideBy02 === 'true') {
            filter[i].style.display = "none";
        } else {
            filter[i].style.display = null;
        }
    }
}

效果验证 #

• 点击Button01：所有filter01类元素（含ElementX）隐藏，Button01变灰
• 此时点击Button02：所有仅带filter02的元素隐藏，Button02变灰，ElementX因仍被filter01标记隐藏，保持不可见
• 再次点击Button01：所有仅带filter01的元素恢复显示，Button01恢复默认颜色，ElementX因仍被filter02标记隐藏，保持不可见
• 再次点击Button02：所有元素恢复显示，Button02恢复默认颜色，ElementX可见，完全符合预期

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