Javascript 类被添加，但随后立即删除

我正在练习JS，我一直在研究过滤机制

代码可以在fiddle中找到

我偶然发现了以下问题：

当我单击我的大小过滤器时，类foundSize似乎被添加到相应的元素中，但是它被立即删除。您可以在控制台中观察到这一点

我的猜测是嵌套循环中有错误，但我不知道它是什么。这个问题可以在第132-138行找到，在那里发生了类add/remove

for (let j = 0; j < filterableSizes.length; j++) {         
    const singleFilterableSize = filterableSizes[j].dataset.size;           
    if( activeFilterArray.indexOf(filterableSizes[j].dataset.size) > -1 ) { 
      filterables[i].classList.add('foundSize'); 
    } else {              
      filterables[i].classList.remove('foundSize'); 
    }
  }

大小
颜色




性虐待
M
L
特大号
M
L
特大号
性虐待
M
L
特大号
无尺寸
无尺寸
无尺寸
性虐待
M
L
特大号
无尺寸

为什么会这样

发生这种情况的原因是当找到任何选定的大小时，

filterableSizes

循环指定了

foundSize

，但是您正在循环所有大小，并且对于每个未选择的大小，它预期将失败

换句话说，您选择

SM

，并期望具有

small

属性的每个项目都有

foundSize

类，但代码会为每个项目执行此操作：

我选择的（sm）筛选器是否与首个大小（sm）匹配->是->分配

foundSize

我选择的（sm）筛选器是否与seconsd大小（M）匹配->否->删除

foundSize

我怎样才能解决它

找到尺寸后，断开内部循环

for (let j = 0; j < filterableSizes.length; j++) {         
    const singleFilterableSize = filterableSizes[j].dataset.size;           
    if( activeFilterArray.indexOf(filterableSizes[j].dataset.size) > -1 ) { 
      filterables[i].classList.add('foundSize'); 
      break;
    } 
    filterables[i].classList.remove('foundSize'); 
  }

for（设j=0；j-1{
filterables[i].classList.add（'foundSize'）；
打破
} 
filterables[i].classList.remove（'foundSize'）；
}

“但是它会立即被删除”这是什么意思？我可以看到类

foundSize

在DOM元素上持久化