如何基于data-filter-color和data-filter-size双属性筛选显示对应DOM元素

• 筛选匹配逻辑错误：原代码中颜色、尺寸的判断是分开执行的，后执行的尺寸判断会直接覆盖颜色判断的结果，且没有实现「两个条件同时满足才展示」的需求
• 类型不匹配：存储选中值的wybranyKolor、wybranyRozmiar是数组类型，直接和元素上的字符串类型属性用==比较，无法得到正确的匹配结果
• 数组清空逻辑错误：原代码中用pop()方法清空选中数组，对于单选场景来说直接重置为空数组更稳妥，避免残留旧值

1. 优化selectFilter函数的选中值清空逻辑 #

function selectFilter(itemOdmiana) {
    if (itemOdmiana.querySelector('.sg_category_color')) {
        var colorFilter = itemOdmiana.querySelector('.sg_category_color').querySelectorAll('.filter-item');
        // KOLORY
        colorFilter.forEach((button) => {
            button.addEventListener("click", (e) => {
                colorFilter.forEach((thisColor) => {
                    thisColor.classList.remove("sg_active");
                })
                // 直接清空数组，替代原有的pop逻辑
                wybranyKolor = [];
                button.classList.add("sg_active");
                var filtrColor = button.getAttribute('data-filter');
                wybranyKolor.push(filtrColor);
                showProducts(itemOdmiana);
            });
        });
    }
    if (itemOdmiana.querySelector('.sg_category_rozmiar')) {
        var sizeFilter = itemOdmiana.querySelector('.sg_category_rozmiar').querySelectorAll('.filter-item');
        // ROZMIAR
        sizeFilter.forEach((button) => {
            button.addEventListener("click", (e) => {
                sizeFilter.forEach((thisSize) => {
                    thisSize.classList.remove("sg_active");
                })
                // 直接清空数组，替代原有的pop逻辑
                wybranyRozmiar = [];
                button.classList.add("sg_active");
                var filtr = button.getAttribute('data-filter');
                wybranyRozmiar.push(filtr);
                showProducts(itemOdmiana);
            });
        });
    }
}

2. 重写showProducts函数的匹配逻辑 #

function showProducts(itemOdmiana) {
    itemOdmiana.querySelectorAll('.glide__slides').forEach(gridDiv => {
        var boxPro = gridDiv.querySelectorAll('.product-item');
        boxPro.forEach((elementDiv) => {
            const kolorCheck = elementDiv.getAttribute("data-filter-color");
            const rozmiarCheck = elementDiv.getAttribute("data-filter-size");
            let shouldShow = true;

            // 存在选中的颜色就校验颜色匹配
            if (wybranyKolor.length > 0) {
                shouldShow = shouldShow && wybranyKolor.includes(kolorCheck);
            }
            // 存在选中的尺寸就校验尺寸匹配
            if (wybranyRozmiar.length > 0) {
                shouldShow = shouldShow && wybranyRozmiar.includes(rozmiarCheck);
            }

            elementDiv.style.display = shouldShow ? 'block' : 'none';
        });
    });
}

修改后支持四种筛选场景：

• 未选中任何筛选项：所有产品都展示
• 仅选中颜色：仅展示颜色匹配的产品
• 仅选中尺寸：仅展示尺寸匹配的产品
• 同时选中颜色和尺寸：仅展示同时满足两个条件的产品

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