JavaScript过滤器可获取全部data属性却无法匹配多个DOM元素问题排查

你的过滤器只能匹配单个DOM元素的核心问题出在filterValues函数的判断逻辑上：

if (itemAttribute.includes(result))

这里的result是包含多个分类值的数组，当你把数组传入字符串的includes()方法时，数组会被隐式转换为逗号分隔的字符串（比如["category-a","category-a"]会变成"category-a,category-a"）。而itemAttribute是单个分类的字符串（比如"category-a"），单个分类字符串不可能包含这个拼接后的长字符串，只有当result是单元素数组时（对应只有一个元素的分类），转换后的字符串才和itemAttribute一致，这就导致只有单元素分类能被匹配，多元素分类无法正常匹配。

另外，你构建attributeArray和result数组的步骤完全多余，既增加了代码复杂度，又没有实际作用。

直接跳过中间数组的构建，用按钮的data-filter值和每个DOM元素的data-filter值直接比较即可：

修正后的filterValues函数 #

function filterValues(arr, btnData) {
    const btnAttribute = btnData.getAttribute('data-filter');
    
    arr.forEach(item => {
        const itemAttribute = item.getAttribute('data-filter');
        // 直接比较属性值，匹配则显示边框
        if (itemAttribute === btnAttribute) {
            item.style.border = '2px solid blue';
        }
    })
}

完整修正后的JavaScript代码 #

"use strict";

const filterBtns = Array.from(document.querySelectorAll("button.btn"));
const itemTag = Array.from(document.querySelectorAll("div.item"));

function applyFilter() {
    filterBtns.forEach((btn, idx) => {
        btn.addEventListener("click", () => {
            if (idx === 0) {
                itemTag.forEach(item => {
                    item.style.border = 'solid 2px red';
                })
            } else {
                itemTag.forEach(item => {
                    item.style.border = 'solid 2px transparent';
                })
                filterValues(itemTag, btn)
            }
        })
    })
}

function filterValues(arr, btnData) {
    const btnAttribute = btnData.getAttribute('data-filter');
    
    arr.forEach(item => {
        const itemAttribute = item.getAttribute('data-filter');
        if (itemAttribute === btnAttribute) {
            item.style.border = '2px solid blue';
        }
    })
}

applyFilter();

修改后，点击分类按钮就能匹配到所有对应分类的DOM元素，每个分类会展示所有对应的博客文章。

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