为现有JavaScript筛选系统添加Category复选框筛选模块

以下是修正后的完整JavaScript代码，仅改动了让Category筛选生效的必要逻辑，其余代码保持原样：

const filterCheckboxes = document.querySelectorAll('.filter-checkbox');
const colorCheckboxes = document.querySelectorAll('.color-checkbox');
const sizeCheckboxes = document.querySelectorAll('.size-checkbox');
const priceCheckboxes = document.querySelectorAll('.price-checkbox');
const categoryCheckboxes = document.querySelectorAll('.category-checkbox');
const filterables = document.querySelectorAll('.filterable');

function getCheckedValues(checkboxes) {
  return Array.from(checkboxes)
    .filter(checkbox => checkbox.checked)
    .map(checkbox => checkbox.value);
}

function updateFilter() {
 let level = 0;

 const colorChecked = getCheckedValues(colorCheckboxes);
 // If there is any Color Checkbox
 if (colorChecked.length) level++;

 const sizeChecked = getCheckedValues(sizeCheckboxes);
 // If there is any Size Checkbox
 if (sizeChecked.length) level++;

 const priceChecked = getCheckedValues(priceCheckboxes);
 // If there is any price Checkbox
 if (priceChecked.length) level++;
    
const categoryChecked = getCheckedValues(categoryCheckboxes);
 // If there is any category Checkbox
 if (categoryChecked.length) level++;

 if (!level) {
   filterables.forEach(filterable => {
     filterable.style.display = 'block';
   })
   return;
 }

 filterables.forEach(filterable => {
   const colors = filterable.dataset.colors.split(' ');
   switch (level) {
     case 1:
       // if this case, it means that only one filter is selected
       if (colorChecked.includes(colors[0]) || sizeChecked.includes(colors[1]) || priceChecked.includes(colors[2]) || categoryChecked.includes(colors[3])) {
          filterable.style.display = 'block';
       } else {
          filterable.style.display = 'none';
       }
       break;
     case 3:
       // Case 3 means that three filters are selected
       if (colorChecked.includes(colors[0]) && sizeChecked.includes(colors[1]) && priceChecked.includes(colors[2]) && categoryChecked.includes(colors[3])) {
          filterable.style.display = 'block';
       } else {
         filterable.style.display = 'none';
       }
       break;
     default:
       // Default means that two filters are selected
       if (colorChecked.length >= 1 && sizeChecked.length >= 1) {
         if (colorChecked.includes(colors[0]) && sizeChecked.includes(colors[1])) {
            filterable.style.display = 'block';
         } else {
            filterable.style.display = 'none';
         }
        } else if (colorChecked.length >= 1 && priceChecked.length >= 1) {
           if (colorChecked.includes(colors[0]) && priceChecked.includes(colors[2])) {
                filterable.style.display = 'block';
           } else {
                filterable.style.display = 'none';
           }
         } else if (colorChecked.length >= 1 && categoryChecked.length >= 1) {
           if (colorChecked.includes(colors[0]) && categoryChecked.includes(colors[3])) {
                filterable.style.display = 'block';
           } else {
                filterable.style.display = 'none';
           }
         } else if (sizeChecked.length >= 1 && priceChecked.length >= 1) {
           if (sizeChecked.includes(colors[1]) && priceChecked.includes(colors[2])) {
              filterable.style.display = 'block';
            } else {
                filterable.style.display = 'none';
            }
          } else if (sizeChecked.length >= 1 && categoryChecked.length >= 1) {
           if (sizeChecked.includes(colors[1]) && categoryChecked.includes(colors[3])) {
              filterable.style.display = 'block';
            } else {
                filterable.style.display = 'none';
            }
          } else if (priceChecked.length >= 1 && categoryChecked.length >= 1) {
           if (priceChecked.includes(colors[2]) && categoryChecked.includes(colors[3])) {
              filterable.style.display = 'block';
            } else {
                filterable.style.display = 'none';
            }
          }
          break;
        }
      });
}

filterCheckboxes.forEach(checkbox => {
   checkbox.addEventListener('change', updateFilter);
});

updateFilter(); // initial filter based on default checkbox state    

关键改动说明 #

1. 修复Case 3的逻辑错误：原代码中误将Category的判断写成了priceChecked.includes(colors[3])，现已修正为categoryChecked.includes(colors[3])，确保三个筛选条件同时选中时能正确匹配分类。
2. 补充Default分支的组合逻辑：在两个筛选条件选中的场景下，新增了以下三种组合的判断：
   • 颜色 + 分类
   • 尺寸 + 分类
   • 价格 + 分类

这样修改后，Category复选框组就能完全生效，且未改动原有筛选逻辑的其他部分。

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