JavaScript 多条件筛选实现：AND/OR 逻辑的应用-js教程-PHP中文网

JavaScript 多条件筛选实现：AND/OR 逻辑的应用

本文详细介绍了如何使用 JavaScript 实现多条件筛选功能，特别是针对不同筛选类别（如颜色和尺寸）之间采用“与”（AND）逻辑，而同一类别内采用“或”（OR）逻辑的场景。通过清晰的 HTML 结构和优化的 JavaScript 代码，教程展示了如何有效管理用户选择，并动态更新产品列表的显示，确保筛选结果的准确性和灵活性。

在现代网页应用中，动态筛选是提升用户体验的关键功能之一。当涉及到多个筛选维度时，如何正确处理不同维度之间的逻辑关系（如“与”and 或“或”or）变得尤为重要。本教程将深入探讨一个常见场景：用户希望根据产品的颜色和尺寸进行筛选，要求当同时选择颜色和尺寸时，产品必须同时满足这两个条件（and 逻辑）；而当只选择其中一个维度时，则显示满足该维度下任一条件的产品（or 逻辑）。

HTML 结构准备

为了实现多维筛选，我们需要为不同的筛选类别（例如颜色和尺寸）分配不同的 CSS 类，以便在 JavaScript 中能够精确地获取它们的状态。同时，产品列表项需要包含足够的数据属性来存储其特性。

以下是建议的 HTML 结构：

<div>
  <h3>颜色</h3>
  <label><input type="checkbox" class="filter-checkbox color-checkbox" value="red">红色</label>
  <label><input type="checkbox" class="filter-checkbox color-checkbox" value="green">绿色</label>
  <label><input type="checkbox" class="filter-checkbox color-checkbox" value="blue">蓝色</label>
</div>
<div>
  <h3>尺寸</h3>
  <label><input type="checkbox" class="filter-checkbox size-checkbox" value="small">小</label>
  <label><input type="checkbox" class="filter-checkbox size-checkbox" value="medium">中</label>
  <label><input type="checkbox" class="filter-checkbox size-checkbox" value="large">大</label>
</div>
<div>
  <h1>筛选结果</h1>
  <!-- data-colors 属性中，第一个值代表颜色，第二个值代表尺寸 -->
  <div class="filterable" data-colors="blue large">产品 A</div>
  <div class="filterable" data-colors="green small">产品 B</div>
  <div class="filterable" data-colors="red medium">产品 C</div>
  <div class="filterable" data-colors="red large">产品 D</div>
</div>

登录后复制

关键点：

为颜色和尺寸复选框分别添加了 color-checkbox 和 size-checkbox 类，方便 JavaScript 区分。
filterable 元素使用 data-colors 属性存储产品的颜色和尺寸，并约定第一个值是颜色，第二个值是尺寸。这种约定对于解析数据至关重要。

JavaScript 核心逻辑实现

核心的筛选逻辑将封装在一个函数中，并在任何筛选条件改变时触发。

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

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() {
  // 1. 获取当前选中的颜色值
  const colorChecked = Array.from(colorCheckboxes)
    .filter(checkbox => checkbox.checked)
    .map(checkbox => checkbox.value);

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

  // 3. 处理无筛选条件的情况：如果没有任何颜色或尺寸被选中，则显示所有产品
  if (!(colorChecked.length || sizeChecked.length)) {
    filterables.forEach(filterable => {
      filterable.style.display = 'block';
    });
    return; // 结束函数执行
  }

  // 4. 遍历所有产品元素，根据筛选条件决定其显示状态
  filterables.forEach(filterable => {
    // 从 data-colors 属性中解析出产品的颜色和尺寸
    const attributes = filterable.dataset.colors.split(' ');
    const productColor = attributes[0]; // 约定第一个是颜色
    const productSize = attributes[1];  // 约定第二个是尺寸

    // 判断是否同时选择了颜色和尺寸筛选条件
    if (colorChecked.length >= 1 && sizeChecked.length >= 1) {
      // 5.1. 如果同时选择了颜色和尺寸（AND 逻辑）：
      // 产品必须同时满足选中的颜色和尺寸条件
      if (colorChecked.includes(productColor) && sizeChecked.includes(productSize)) {
        filterable.style.display = 'block';
      } else {
        filterable.style.display = 'none';
      }
    } else {
      // 5.2. 如果只选择了颜色或只选择了尺寸（OR 逻辑）：
      // 产品只要满足选中的颜色或尺寸条件之一即可
      // 注意：如果 colorChecked 为空，则 colorChecked.includes(productColor) 为 false，
      // 此时条件判断依赖于 sizeChecked.includes(productSize)，反之亦然。
      if (colorChecked.includes(productColor) || sizeChecked.includes(productSize)) {
        filterable.style.display = 'block';
      } else {
        filterable.style.display = 'none';
      }
    }
  });
}

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

// 7. 页面加载时执行一次筛选，以处理默认选中状态
updateFilter();

登录后复制

代码解析：

获取筛选值： 通过 querySelectorAll 和 Array.from 获取所有颜色和尺寸复选框，然后使用 filter 筛选出被选中的复选框，并用 map 提取其 value 值，形成 colorChecked 和 sizeChecked 数组。
处理无筛选条件： 如果 colorChecked 和 sizeChecked 数组都为空（即 !(colorChecked.length || sizeChecked.length) 为真），表示用户没有选择任何筛选条件，此时应显示所有产品。
遍历产品元素： 对每个 filterable 产品元素，从其 data-colors 属性中解析出产品的实际颜色和尺寸。
AND 逻辑（同时选中多类筛选）：
- 当 colorChecked.length >= 1 且 sizeChecked.length >= 1 时，表示用户同时在颜色和尺寸两个类别中进行了选择。
- 此时，产品必须同时满足选中的颜色和尺寸条件 (colorChecked.includes(productColor) && sizeChecked.includes(productSize)) 才能显示。
OR 逻辑（只选中一类筛选）：
- 当上述 if 条件不满足时（即只选择了颜色，或只选择了尺寸，或两者都未选但已在第3步处理），执行 else 块。
- 此时，产品只要满足选中的颜色或尺寸条件之一 (colorChecked.includes(productColor) || sizeChecked.includes(productSize)) 即可显示。这种设计巧妙地利用了 || 操作符的短路特性，当某一类筛选数组为空时，对应的 includes 判断会返回 false，不影响另一类筛选的判断。
事件监听： 为所有筛选复选框添加 change 事件监听器，确保每次用户更改选择时都能触发 updateFilter 函数。
初始化： 在脚本加载完成后立即调用 updateFilter() 一次，以确保页面初次加载时根据默认的复选框状态显示正确的筛选结果。

完整示例

将上述 HTML 和 JavaScript 代码结合，即可实现一个功能完善的多条件筛选器。

语鲸

AI智能阅读辅助工具

252

查看详情

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 多条件筛选</title>
<style>
  body { font-family: sans-serif; margin: 20px; }
  .filterable { border: 1px solid #eee; padding: 10px; margin-bottom: 5px; background-color: #f9f9f9; }
  h3 { margin-top: 15px; margin-bottom: 5px; }
  label { display: block; margin-bottom: 3px; }
</style>
</head>
<body>

  <div>
    <h3>颜色</h3>
    <label><input type="checkbox" class="filter-checkbox color-checkbox" value="red">红色</label>
    <label><input type="checkbox" class="filter-checkbox color-checkbox" value="green">绿色</label>
    <label><input type="checkbox" class="filter-checkbox color-checkbox" value="blue">蓝色</label>
  </div>
  <div>
    <h3>尺寸</h3>
    <label><input type="checkbox" class="filter-checkbox size-checkbox" value="small">小</label>
    <label><input type="checkbox" class="filter-checkbox size-checkbox" value="medium">中</label>
    <label><input type="checkbox" class="filter-checkbox size-checkbox" value="large">大</label>
  </div>
  <div>
    <h1>筛选结果</h1>
    <div class="filterable" data-colors="blue large">产品 A</div>
    <div class="filterable" data-colors="green small">产品 B</div>
    <div class="filterable" data-colors="red medium">产品 C</div>
    <div class="filterable" data-colors="red large">产品 D</div>
  </div>

  <script>
    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 => {
        const attributes = filterable.dataset.colors.split(' ');
        const productColor = attributes[0];
        const productSize = attributes[1];

        if (colorChecked.length >= 1 && sizeChecked.length >= 1) {
          if (colorChecked.includes(productColor) && sizeChecked.includes(productSize)) {
            filterable.style.display = 'block';
          } else {
            filterable.style.display = 'none';
          }
        } else {
          if (colorChecked.includes(productColor) || sizeChecked.includes(productSize)) {
            filterable.style.display = 'block';
          } else {
            filterable.style.display = 'none';
          }
        }
      });
    }

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

    updateFilter();
  </script>

</body>
</html>

登录后复制

注意事项与扩展

数据属性格式约定： 当前示例中 data-colors="blue large" 依赖于颜色和尺寸的固定顺序。如果产品属性更多或顺序不固定，建议使用更明确的数据属性，例如 data-color="blue" 和 data-size="large"。这样在 JavaScript 中获取时会更清晰和健壮：
```
// HTML
<div class="filterable" data-color="blue" data-size="large">产品 A</div>

// JavaScript
const productColor = filterable.dataset.color;
const productSize = filterable.dataset.size;
```
登录后复制
这将使代码更具可读性和可维护性，特别是在未来需要添加更多筛选维度时。
多类别筛选的通用性： 当前逻辑适用于两个筛选类别。如果需要支持更多类别（例如品牌、材质等），可以扩展 updateFilter 函数，为每个类别获取其选中值，并相应地调整 AND/OR 逻辑。一种更通用的方法是动态生成筛选条件，并使用 Array.prototype.every()（用于 AND 逻辑）和 Array.prototype.some()（用于 OR 逻辑）来判断产品是否符合所有激活的筛选组。
性能优化： 对于包含大量产品元素的页面，每次筛选都遍历所有元素并修改其 display 属性可能会影响性能。可以考虑以下优化：
- 数据缓存： 将产品数据存储在 JavaScript 数组中，筛选时操作数据数组，然后根据筛选结果批量更新 DOM。
- 虚拟滚动/分页： 只渲染当前视口可见的产品，或实现分页加载。
- CSS 替代： 使用 CSS 类来控制显示/隐藏，而不是直接操作 style.display，这有时能让浏览器优化渲染。
用户体验：
- 清除/重置按钮： 提供一个按钮，允许用户一键清除所有筛选条件，显示所有产品。
- 筛选结果计数： 显示当前有多少产品符合筛选条件。
- 加载指示器： 对于大型数据集，在筛选操作进行时显示加载指示器。