Javascript 使用indexOf方法设置多个过滤器onclick-不工作

我试着通过点击一个按钮来过滤一些元素。这些过滤器可以组合使用。元素在数据属性中可能包含多个过滤器，以逗号分隔

我的HTML

<div class="filterbar">
<button data-filter="filter1"></button>
<button data-filter="filter2"></button>
<button data-filter="filter3"></button>
</div>

<div class="div"  data-filter-category="filter1, filter2"></div>
<div class="div" data-filter-category="filter2"></div>
<div class="div" data-filter-category="filter3"></div>

我的Js：

   document.addEventListener('click', function (e) {
     if (e.target.closest('button')) {


         e.target.classList.toggle('active');

         // Returns an array with active filters 
        var activeFilters = document.querySelectorAll('.active');
        var categories = [];
        Array.prototype.forEach.call(activeFilters, function(activeFilter) {
            categories.push(activeFilter.getAttribute('data-filter'));
        });

       var allDivs = document.querySelectorAll('.div');

       Array.prototype.forEach.call(allDivs, function(div) {
         // Build an array of filter-attributes
         var categoryArr = div.getAttribute('data-filter-category').split(',');

         for (var i = 0; i < categoryArr.length; i++){
                if (categories.indexOf(categoryArr[i]) > -1) {
                   div.classList.add('filtered');
                }
            }
       });
    }
}, false);

document.addEventListener（'click'，函数（e）{
如果（例如，目标最近（'按钮'））{
e、 target.classList.toggle（'active'）；
//返回带有活动筛选器的数组
var activeFilters=document.querySelectorAll（'.active'）；
var类别=[]；
Array.prototype.forEach.call（activeFilters，函数（activeFilter）{
categories.push（activeFilter.getAttribute（'data-filter'）；
});
var allDivs=document.querySelectorAll（'.div'）；
Array.prototype.forEach.call（allDivs，function（div）{
//构建一个过滤器属性数组
var categoryArr=div.getAttribute（'data-filter-category'）.split（'，'）；
对于（变量i=0；i-1）{
div.classList.add（'filtered'）；
}
}
});
}
}，假）；

这是行不通的。通过点击过滤属性为“filter2”的按钮2，我希望2个div的类为“filtered”。具有筛选器2的div 1和具有筛选器2 asl数据属性的div 2

---

为什么不起作用？

过滤器1、过滤器2的属性用逗号分开时，将产生

'filter'

和

'filter2'

-您需要另一个空格。您还可以通过使用扩展语法和

.map

来获得类别，从而显著地精简代码，然后您可以使用

classList.toggle

的第二个参数来启用或禁用该类，具体取决于正在迭代的div是否在集合中有类别：

document.addEventListener（'click'，函数（e）{
如果（！e.target.closest（'button'））返回；
e、 target.classList.toggle（'active'）；
常量类别=新集合(
[…document.querySelectorAll（'.active'）]
.map（filter=>filter.getAttribute（'data-filter'））
);
for（document.querySelectorAll（'.div'）的常量div）{
const thisDivCats=div.getAttribute（'data-filter-category'）.split（'，'）；
toggle（'filtered'，thisDivCats.some（cat=>categories.has（cat））；
}
});
。已过滤{
背景颜色：黄色；
}

点击
点击
点击
1, 2
2.
3
非常感谢您的精彩表演！我感到惭愧，因为现在错误似乎显而易见！也非常感谢您的完美js代码。不幸的是，我必须用JavaScript ES5编写代码，但我将检查是否有一种方法可以传输代码，以便我可以使用您的一小段代码；）非常感谢。