JavaScript多条件高级筛选：实现AND与OR逻辑的动态过滤

霞舞

发布时间：2025-08-18 20:04:20

520人浏览过

来源于php中文网

原创

javascript多条件高级筛选：实现and与or逻辑的动态过滤

本教程详细阐述了如何使用JavaScript实现多条件产品筛选功能，特别是如何处理不同筛选类别（如颜色和尺寸）之间的“AND”和“OR”逻辑关系。通过分离筛选器类型、动态获取选中值，并根据用户选择的组合应用精确的过滤规则，本文将指导读者构建一个灵活且功能强大的前端筛选系统，提升用户体验。

引言：构建灵活的商品筛选功能

在现代Web应用中，商品或数据列表的筛选功能是提升用户体验的关键一环。常见需求是用户可以根据多个属性（如颜色、尺寸、品牌等）来缩小结果范围。然而，当用户同时选择来自不同类别的筛选条件时，如何正确处理它们之间的逻辑关系（是“AND”关系，即所有条件都必须满足；还是“OR”关系，即满足任一条件即可）是一个常见的挑战。

本文将深入探讨如何使用JavaScript构建一个强大的筛选器，它能够智能地识别用户选择，并根据需要应用“AND”或“OR”逻辑。我们将通过一个具体的商品筛选示例，演示如何根据颜色和尺寸两个维度进行过滤，并实现当两者都选中时采用“AND”逻辑，而当仅选中其中一个维度时采用“OR”逻辑。

HTML结构：为筛选器分类

为了能够区分不同类型的筛选条件（例如颜色和尺寸），我们需要在HTML结构中为它们添加特定的类名。这使得JavaScript可以轻松地选择和管理不同类别的复选框。


  颜色
  红色
  绿色
  蓝色


  尺寸
  小
  中
  大


  筛选结果
  商品 A
  商品 B
  商品 C
  商品 D

关键点：

立即学习“Java免费学习笔记（深入）”；

filter-checkbox：所有筛选复选框的通用类。
color-checkbox：专用于颜色筛选的类。
size-checkbox：专用于尺寸筛选的类。
filterable：表示可被筛选的商品元素。
data-colors：自定义数据属性，用于存储商品的颜色和尺寸信息。注意这里的值是"blue large"这种格式，颜色和尺寸之间用空格分隔，且顺序固定（颜色在前，尺寸在后）。

JavaScript逻辑：实现多条件过滤

核心的筛选逻辑将通过JavaScript实现。我们需要：

获取所有筛选复选框和可筛选商品元素。
分别获取颜色和尺寸筛选器中所有被选中的值。
根据被选中筛选器的组合情况，应用不同的过滤逻辑。

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

/**
 * 更新筛选结果的函数
 */
function updateFilter() {
  // 获取所有选中的颜色值
  const colorChecked = Array.from(colorCheckboxes)
    .filter(checkbox => checkbox.checked)
    .map(checkbox => checkbox.value);

  // 获取所有选中的尺寸值
  const sizeChecked = Array.from(sizeCheckboxes)
    .filter(checkbox => checkbox.checked)
    .map(checkbox => checkbox.value);

  // 如果没有选中任何筛选条件，则显示所有商品
  if (!(colorChecked.length || sizeChecked.length)) {
    filterables.forEach(filterable => {
      filterable.style.display = 'block';
    });
    return; // 结束函数执行
  }

  // 遍历所有可筛选的商品元素
  filterables.forEach(filterable => {
    // 从data-colors属性中解析出商品的颜色和尺寸
    const itemAttributes = filterable.dataset.colors.split(' ');
    const itemColor = itemAttributes[0]; // 假定第一个是颜色
    const itemSize = itemAttributes[1];  // 假定第二个是尺寸

    let shouldDisplay = false; // 默认不显示

    // 情况一：颜色和尺寸筛选器都有选中项（应用AND逻辑）
    if (colorChecked.length >= 1 && sizeChecked.length >= 1) {
      // 只有当商品的颜色和尺寸都包含在各自选中的列表中时才显示
      if (colorChecked.includes(itemColor) && sizeChecked.includes(itemSize)) {
        shouldDisplay = true;
      }
    }
    // 情况二：只有颜色或只有尺寸筛选器有选中项（应用OR逻辑）
    else {
      // 只要商品的颜色或尺寸包含在各自选中的列表中，就显示
      if (colorChecked.includes(itemColor) || sizeChecked.includes(itemSize)) {
        shouldDisplay = true;
      }
    }

    // 根据shouldDisplay的值来控制元素的显示/隐藏
    filterable.style.display = shouldDisplay ? 'block' : 'none';
  });
}

// 为所有筛选复选框添加change事件监听器
filterCheckboxes.forEach(checkbox => {
  checkbox.addEventListener('change', updateFilter);
});

// 页面加载时执行一次筛选，以反映初始状态
updateFilter();

代码解析：

DOM元素获取：

考拉新媒体导航
考拉新媒体导航——新媒体人的专属门户网站

下载
- filterCheckboxes：获取所有复选框，用于统一添加事件监听。
- colorCheckboxes 和 sizeCheckboxes：分别获取颜色和尺寸类别的复选框，用于独立获取选中值。
- filterables：获取所有待筛选的商品元素。
updateFilter 函数：
- 获取选中值： 使用 Array.from().filter().map() 模式，高效地从DOM集合中提取出每个类别下被选中的复选框的值，存储在 colorChecked 和 sizeChecked 数组中。
- 无筛选条件处理： if (!(colorChecked.length || sizeChecked.length)) 判断是否没有任何筛选条件被选中。如果是，则显示所有商品并立即返回。
- 遍历商品元素： 对每个 filterable 元素执行以下操作：
  - 解析商品属性： filterable.dataset.colors.split(' ') 将 data-colors 属性的值（如 "blue large"）按空格分割成数组 ['blue', 'large']。然后通过索引 [0] 和 [1] 分别获取颜色和尺寸。
  - 条件逻辑判断：
    - if (colorChecked.length >= 1 && sizeChecked.length >= 1)：这是一个关键判断。如果颜色和尺寸两个筛选组都有至少一个选项被选中，则进入“AND”逻辑分支。这意味着商品必须同时满足选中的颜色和选中的尺寸才能显示 (colorChecked.includes(itemColor) && sizeChecked.includes(itemSize))。
    - else：如果只有一个筛选组有选中项（或者两个都没有，但这种情况已在前面处理），则进入“OR”逻辑分支。这意味着商品只要满足选中的颜色或者选中的尺寸中的任意一个条件即可显示 (colorChecked.includes(itemColor) || sizeChecked.includes(itemSize))。
  - 显示/隐藏： 根据 shouldDisplay 的布尔值，设置元素的 display 样式为 'block' (显示) 或 'none' (隐藏)。
事件监听与初始化：
- filterCheckboxes.forEach(checkbox => { checkbox.addEventListener('change', updateFilter); });：为所有筛选复选框添加 change 事件监听器，确保每次复选框状态改变时都调用 updateFilter 函数。
- updateFilter();：在页面加载完成后立即调用一次 updateFilter，以确保初始状态（例如，如果有默认选中的复选框）下的商品列表是正确的。

优化与注意事项

数据属性的健壮性： 当前方案依赖于 data-colors="color size" 这种字符串格式，并通过索引 [0] 和 [1] 来获取颜色和尺寸。这种方式在属性数量增加或顺序变化时容易出错。 建议优化： 使用独立的自定义数据属性，如 data-color="blue" 和 data-size="large"。这样在JavaScript中获取时会更清晰和健壮：
```
// HTML
商品 A

// JavaScript
const itemColor = filterable.dataset.color;
const itemSize = filterable.dataset.size;
```
这将使代码更易于维护和扩展。
扩展性： 如果未来需要添加更多筛选类别（如品牌、材质等），当前的逻辑需要进行扩展。你可以为每个新类别创建独立的复选框类和对应的 checked 数组。在 updateFilter 函数中，你需要添加更多的条件判断来处理不同筛选类别的组合逻辑。对于更复杂的场景，可以考虑使用更通用的筛选器管理模式，例如将所有筛选器定义为对象，并动态生成它们的逻辑。
性能考虑： 对于包含大量商品（数千甚至更多）的列表，每次复选框改变都遍历所有商品并修改DOM的 display 属性可能会导致性能问题。 优化方向：
- 批量DOM操作： 先计算出所有需要显示和隐藏的元素列表，然后一次性修改它们的样式，而不是在循环中逐个修改。
- 虚拟滚动/分页： 对于超大型列表，考虑实现虚拟滚动或分页加载，只渲染当前视口内的商品。
- 数据缓存： 如果商品数据不经常变化，可以将其存储在JavaScript数组中，直接在内存中进行筛选，只更新需要显示的DOM元素。
用户体验：
- 加载指示器： 在筛选操作执行期间（特别是数据量大时），可以显示一个加载指示器，告知用户系统正在处理。
- 清除筛选按钮： 提供一个“清除所有筛选”的按钮，方便用户快速重置。