当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript多条件筛选：AND/OR逻辑动态教程

JavaScript多条件筛选：AND/OR逻辑动态教程

2025-09-16 18:36:40 0浏览收藏

引言

在现代Web应用中，动态筛选功能是提升用户体验的关键组成部分。当用户需要根据多个属性（例如颜色、尺寸、品牌等）来筛选产品或数据时，如何有效地实现多条件过滤，并灵活处理不同筛选条件间的逻辑关系（如“AND”或“OR”），成为前端开发中的常见挑战。本教程将深入探讨如何使用纯JavaScript构建一个健壮的多条件筛选系统，特别关注如何根据用户选择的筛选器数量来动态切换AND/OR逻辑。

核心概念与数据结构

要实现多条件筛选，首先需要确保HTML元素中包含足够的元数据供JavaScript读取。在本例中，我们使用data-*属性来存储产品的颜色和尺寸信息。为了简化处理，我们将颜色和尺寸合并存储在一个data-colors属性中，并用空格分隔。

例如：

Product A
Product B

这里，data-colors的第一个值代表颜色，第二个值代表尺寸。这种方式要求数据格式严格一致。

为了区分不同类型的筛选器（如颜色筛选器和尺寸筛选器），我们为它们添加了特定的类名：color-checkbox和size-checkbox，同时保留通用的filter-checkbox类。

HTML结构

以下是实现多条件筛选所需的HTML结构。它包括颜色和尺寸的复选框组，以及待筛选的产品列表。


  颜色
  红色
  绿色
  蓝色


  尺寸
  小
  中
  大


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

JavaScript实现

JavaScript是实现动态筛选的核心。我们将通过以下步骤构建筛选逻辑：

获取DOM元素： 选中所有相关的复选框和可筛选的产品元素。
定义updateFilter函数： 这是处理筛选逻辑的主要函数，每次复选框状态改变时都会调用。
提取选中值： 从颜色和尺寸复选框组中分别获取所有被选中的值。
处理无筛选条件情况： 如果没有任何筛选条件被选中，则显示所有产品。
遍历并应用筛选逻辑： 遍历每个产品元素，根据选中的筛选条件应用复杂的AND/OR逻辑来决定其显示状态。
事件监听： 为所有复选框添加change事件监听器。
初始筛选： 页面加载时执行一次updateFilter，以反映默认的筛选状态。

// 获取所有筛选复选框
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 > 0 || sizeChecked.length > 0)) {
    filterables.forEach(filterable => {
      filterable.style.display = 'block';
    });
    return;
  }

  // 遍历每个可筛选的产品元素
  filterables.forEach(filterable => {
    // 从data-colors属性中解析出产品的颜色和尺寸
    // 假设格式为 "color value_size value"
    const itemAttributes = filterable.dataset.colors.split(' ');
    const itemColor = itemAttributes[0];
    const itemSize = itemAttributes[1];

    let shouldDisplay = false; // 标记产品是否应该显示

    // 情况1: 颜色和尺寸筛选器都有选中项 (应用AND逻辑)
    if (colorChecked.length > 0 && sizeChecked.length > 0) {
      // 产品必须同时匹配选中的颜色和选中的尺寸
      shouldDisplay = colorChecked.includes(itemColor) && sizeChecked.includes(itemSize);
    }
    // 情况2: 只有颜色筛选器有选中项 (应用OR逻辑 within colors)
    else if (colorChecked.length > 0) {
      // 产品必须匹配任何一个选中的颜色
      shouldDisplay = colorChecked.includes(itemColor);
    }
    // 情况3: 只有尺寸筛选器有选中项 (应用OR逻辑 within sizes)
    else if (sizeChecked.length > 0) {
      // 产品必须匹配任何一个选中的尺寸
      shouldDisplay = sizeChecked.includes(itemSize);
    }
    // 注意: 没有筛选条件的情况已在函数开头处理

    // 根据shouldDisplay的值来设置产品的显示状态
    filterable.style.display = shouldDisplay ? 'block' : 'none';
  });
}

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

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

注意事项与优化建议

数据属性的健壮性： 当前方案依赖于data-colors属性中颜色和尺寸的固定顺序。如果数据结构变得更复杂或顺序可能改变，建议使用独立的data-color和data-size属性，例如：
```
产品 A
```
这样可以使解析逻辑更清晰、更具扩展性。
多筛选器类型扩展： 如果需要添加更多筛选器类型（如品牌、材质等），当前的if/else if结构会变得冗长。可以考虑更通用的方法，例如：
- 将筛选器配置存储在一个数组中，每个元素包含筛选器的类名和对应的data-*属性名。
- 动态生成筛选逻辑，循环遍历所有筛选器类型，检查是否有选中项，并根据规则组合条件。
性能优化： 对于包含大量可筛选产品（数百或数千个）的页面，频繁地直接操作DOM元素的style.display属性可能会导致性能问题。可以考虑以下优化：
- 离线DOM操作： 先将需要隐藏的元素从DOM中移除，或将它们添加到一个DocumentFragment中，然后一次性更新DOM。
- CSS类切换： 通过添加/移除CSS类来控制元素的显示/隐藏，而不是直接修改style属性。这允许CSS接管动画和过渡效果。
- 虚拟列表/分页： 如果数据量非常大，考虑只渲染当前视口可见的产品，或实现分页功能。
用户体验增强：
- “清除所有筛选”按钮： 提供一个按钮，允许用户一键清除所有选中的筛选条件。
- 筛选结果计数： 显示当前筛选条件下匹配的产品数量。
- 加载指示器： 在复杂筛选操作进行时，显示一个加载指示器，避免UI卡顿。

总结

本教程展示了如何使用JavaScript实现一个灵活的多条件动态筛选系统，能够根据用户选择的筛选器数量，智能地在AND和OR逻辑之间切换。通过清晰的HTML结构、分离的JavaScript逻辑和对数据属性的合理利用，我们可以构建出用户友好且功能强大的筛选界面。同时，也强调了在实际项目中需要考虑的性能、可扩展性和用户体验等方面的优化策略。掌握这些技术，将有助于您在Web开发中创建更具交互性和实用性的应用。

好了，本文到此结束，带大家了解了《JavaScript多条件筛选：AND/OR逻辑动态教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！