JS实现关联元素隐藏时对应控制按钮自动置灰交互逻辑

问题复现 #

当前实现存在筛选逻辑不联动问题，具体表现：

• 页面包含两类控制按钮：Button01绑定.filter01选择器，控制ElementX、ElementY两个元素显隐；Button02绑定.filter02选择器，仅控制ElementY显隐
• 点击Button01隐藏两个元素后，Button02点击无响应，必须再次点击Button01才能恢复交互

预期交互规则 #

• 点击Button01隐藏ElementX、ElementY后，Button02需自动置灰禁用，提示用户其关联元素已全部被隐藏
• 点击置灰状态的Button02时，需恢复ElementY的显示，同时自动取消Button01的激活状态，因为Button01关联的元素已有一个恢复显示

原有问题代码 #

for (let button of document.querySelectorAll(".filterbutton")) {
    button.addEventListener("click", filter);
}

let filters = new Set;

function toggleDisplay(selector, display) {
    let elems = document.querySelectorAll(selector);
    for (let elem of elems) {
        elem.style.display = display;
    }
}

function filter() {
    let filterSelector = this.dataset.filter;
    let show = filters.delete(filterSelector);
    this.style.color = show ? "" : "rgb(200,200,200)";
    if (!show) {
        filters.add(filterSelector); // toggle this filter
    } else {
        toggleDisplay(filterSelector, "");
    }
    if (filters.size) {
        toggleDisplay([...filters].join(","), "none");
    }
}

<div class="filterbutton" data-filter=".filter01">Filter01</div>
<div class="filterbutton" data-filter=".filter02">Filter02</div>

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

问题根因 #

原有逻辑直接将所有生效筛选器拼接后批量设置隐藏，没有处理筛选规则之间的元素重叠关系，也没有做按钮状态的联动校验：当Button01的筛选规则生效时，Button02的关联元素已经被隐藏，但Button02自身状态没有同步，点击后触发的显隐逻辑会被全局批量隐藏规则覆盖，导致无响应。

修复实现 #

修复核心逻辑分三点：

1. 放弃批量拼接选择器设置显隐的方案，改为逐个校验元素是否命中任意生效的筛选规则，单独控制每个元素的显示状态
2. 每次筛选状态变更后，遍历所有按钮，检查其关联元素是否全部处于隐藏状态，自动同步按钮的置灰/可用状态
3. 点击置灰状态的按钮时，自动移除与当前按钮关联元素有重叠的生效筛选规则，保证点击后对应元素可以正常显示

完整修复代码如下：

// 绑定所有筛选按钮点击事件
for (let button of document.querySelectorAll(".filterbutton")) {
    button.addEventListener("click", filter);
}

// 存储当前生效的隐藏筛选规则
const activeFilters = new Set();

/**
 * 全局刷新元素显隐状态、按钮可用状态
 */
function refreshUI() {
    // 获取所有受筛选控制的元素
    const allTargets = document.querySelectorAll(".filter01, .filter02");
    // 先重置所有元素为显示状态
    allTargets.forEach(elem => elem.style.display = "");

    // 逐个判断元素是否命中生效的筛选规则，命中则隐藏
    if (activeFilters.size) {
        allTargets.forEach(elem => {
            for (const rule of activeFilters) {
                if (elem.matches(rule)) {
                    elem.style.display = "none";
                    break;
                }
            }
        });
    }

    // 同步所有按钮的状态
    document.querySelectorAll(".filterbutton").forEach(btn => {
        const selector = btn.dataset.filter;
        const relatedElems = document.querySelectorAll(selector);
        // 检查关联元素是否全部隐藏
        const isAllHidden = Array.from(relatedElems).every(elem => elem.style.display === "none");

        if (isAllHidden) {
            btn.style.color = "rgb(200,200,200)";
            btn.dataset.disabled = "true";
        } else {
            // 元素未全隐藏时，按当前筛选是否生效设置样式
            btn.style.color = activeFilters.has(selector) ? "rgb(200,200,200)" : "";
            btn.dataset.disabled = "false";
        }
    });
}

/**
 * 筛选按钮点击处理逻辑
 */
function filter() {
    const selector = this.dataset.filter;
    const isDisabled = this.dataset.disabled === "true";

    if (isDisabled) {
        // 按钮置灰状态下点击，移除所有和当前按钮关联元素有重叠的生效筛选规则
        for (const existRule of [...activeFilters]) {
            const relatedElems = document.querySelectorAll(selector);
            const hasOverlap = Array.from(relatedElems).some(elem => elem.matches(existRule));
            if (hasOverlap) activeFilters.delete(existRule);
        }
    } else {
        // 正常状态下切换当前筛选规则的生效状态
        activeFilters.has(selector) ? activeFilters.delete(selector) : activeFilters.add(selector);
    }

    // 刷新全局UI
    refreshUI();
}

// 初始化状态
refreshUI();

HTML部分无需修改，直接复用原有结构即可。

效果验证 #

• 点击Filter01：ElementX、ElementY全部隐藏，Filter02自动置灰
• 点击置灰状态的Filter02：ElementY恢复显示，Filter01自动取消激活状态恢复正常样式
• 单独点击Filter02：仅ElementY隐藏，ElementX保持显示，Filter01状态不受影响

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