JS开发商品筛选时报forEach is not a function错误 无法打印匹配类名

报错Uncaught TypeError: boxPro.forEach is not a function 修复 #

这个报错的原因是querySelector()仅返回匹配到的单个DOM元素，不是可遍历的集合，没有forEach方法，将其替换为querySelectorAll()即可，该方法会返回匹配所有选择器的NodeList集合，支持forEach遍历。

筛选匹配逻辑&打印匹配元素修复 #

同时你原有代码还存在两个隐藏问题：

1. 清空选中筛选值的逻辑错误：pop()方法不需要传参，你当前的写法无法正确清空数组，会导致筛选值残留
2. classList.contains()不支持直接传入数组作为参数，需要单独判断数组内的筛选值是否存在于元素类名中，同时要兼顾颜色、尺寸两个筛选条件的组合匹配

修复后完整代码 #

筛选选择逻辑

// FILTERS 
var wybranyKolor = [];
var wybranyRozmiar = [];

function selectFilter(){
    document.querySelectorAll(".grupa").forEach(group => {
        var colorFilter = group.querySelector('.button-group-color').querySelectorAll('.button')
        var sizeFilter = group.querySelector('.button-group-size').querySelectorAll('.button')

        // KOLORY
        colorFilter.forEach((button) => {
            button.addEventListener("click", (e) =>{
                colorFilter.forEach((thisColor) => {
                    thisColor.classList.remove("sg_active");
                })
                // 直接清空颜色数组，无需传参pop
                wybranyKolor = [];
                button.classList.add("sg_active");
                var filtr = button.getAttribute('data-filter');
                wybranyKolor.push(filtr);
                showProducts();
                console.log(wybranyKolor);
            });
        });

        // ROZMIAR
        sizeFilter.forEach((button) => {
            button.addEventListener("click", (e) =>{
                sizeFilter.forEach((thisSize) => {
                    thisSize.classList.remove("sg_active");
                })
                // 直接清空尺寸数组
                wybranyRozmiar = [];
                button.classList.add("sg_active");
                var filtr = button.getAttribute('data-filter');
                wybranyRozmiar.push(filtr);
                showProducts();
                console.log(wybranyRozmiar);
            });
        });
    });
}

商品筛选展示逻辑

function showProducts(){
    document.querySelectorAll('.grid').forEach(gridDiv => {
        // 替换为querySelectorAll获取所有匹配的商品元素
        var boxPro = gridDiv.querySelectorAll('.box_pro');

        boxPro.forEach((elementDiv) => {
            // 判断是否匹配颜色筛选（无选中颜色时默认匹配）
            let matchColor = wybranyKolor.length === 0 || wybranyKolor.some(color => elementDiv.classList.contains(color));
            // 判断是否匹配尺寸筛选（无选中尺寸时默认匹配）
            let matchSize = wybranyRozmiar.length === 0 || wybranyRozmiar.some(size => elementDiv.classList.contains(size));
            
            if(matchColor && matchSize){
                // 打印匹配到的商品DOM元素，如需打印元素内的特定内容可以替换为elementDiv.innerText、elementDiv.dataset.xxx等
                console.log('匹配到的商品：', elementDiv);
                // 展示匹配商品的逻辑可以加在这里：elementDiv.style.display = 'block';
            }else{
                // 隐藏不匹配商品的逻辑可以加在这里：elementDiv.style.display = 'none';
            }
        });
    });
}

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