JavaScript多条件产品过滤优化：实现多维度交集筛选需求

核心就是把原来「满足任一条件即显示」的逻辑，改成「满足所有选中条件才显示」。下面直接给你改代码的思路和示例：

第一步：收集选中的筛选条件 #

先把用户勾选的条件按类别整理出来：

// 获取选中的颜色（假设复选框name为color）
const selectedColors = Array.from(document.querySelectorAll('input[name="color"]:checked')).map(el => el.value);
// 获取选中的尺寸（假设复选框name为size）
const selectedSizes = Array.from(document.querySelectorAll('input[name="size"]:checked')).map(el => el.value);

第二步：修改筛选判断逻辑 #

原来的逻辑可能用了some()（只要一个条件满足就返回true），现在换成every()的思路——所有选中的条件必须同时满足，还要处理「某类条件没勾选则直接跳过」的情况：

// 假设你的产品数组是products，每个产品结构类似 { name: 'Product B', color: 'red', size: 'small' }
const filteredProducts = products.filter(product => {
  // 颜色判断：无选中颜色则自动满足，有选中则产品颜色必须在列表内
  const colorPass = selectedColors.length === 0 || selectedColors.includes(product.color);
  // 尺寸判断：同理
  const sizePass = selectedSizes.length === 0 || selectedSizes.includes(product.size);
  
  // 关键：必须同时通过所有选中类别的判断
  return colorPass && sizePass;
});

对应你提到的场景验证 #

当你勾选所有颜色、同时勾选small尺寸时：

• Product B：颜色在选中列表（满足）、尺寸是small（满足），会被保留
• 其他尺寸非small的产品：尺寸判断不通过，直接被过滤

完美实现你要的「仅显示同时符合颜色和small尺寸的Product B」的效果。

扩展提示 #

如果后续加更多筛选类别（比如价格区间、品牌），只需要添加对应的xxxPass判断，最后在return里用&&连接所有条件即可，逻辑完全通用。

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