在现代网页应用中，动态筛选是提升用户体验的关键功能之一。当涉及到多个筛选维度时，如何正确处理不同维度之间的逻辑关系（如“与”and 或“或”or）变得尤为重要。本教程将深入探讨一个常见场景：用户希望根据产品的颜色和尺寸进行筛选，要求当同时选择颜色和尺寸时，产品必须同时满足这两个条件（and 逻辑）；而当只选择其中一个维度时，则显示满足该维度下任一条件的产品（or 逻辑）。
HTML 结构准备
为了实现多维筛选，我们需要为不同的筛选类别（例如颜色和尺寸）分配不同的 CSS 类，以便在 JavaScript 中能够精确地获取它们的状态。同时，产品列表项需要包含足够的数据属性来存储其特性。
以下是建议的 HTML 结构：
颜色
尺寸
筛选结果
产品 A产品 B产品 C产品 D
关键点：
- 为颜色和尺寸复选框分别添加了 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 代码结合，即可实现一个功能完善的多条件筛选器。
JavaScript 多条件筛选 颜色
尺寸
筛选结果
产品 A产品 B产品 C产品 D
注意事项与扩展
-
数据属性格式约定： 当前示例中 data-colors="blue large" 依赖于颜色和尺寸的固定顺序。如果产品属性更多或顺序不固定，建议使用更明确的数据属性，例如 data-color="blue" 和 data-size="large"。这样在 JavaScript 中获取时会更清晰和健壮：
// HTML
产品 A// 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，这有时能让浏览器优化渲染。
-
用户体验：
- 清除/重置按钮： 提供一个按钮，允许用户一键清除所有筛选条件，显示所有产品。
- 筛选结果计数： 显示当前有多少产品符合筛选条件。
- 加载指示器： 对于大型数据集，在筛选操作进行时显示加载指示器。
通过本教程，您应该能够掌握在 JavaScript 中实现复杂多条件筛选的核心逻辑，并能根据实际需求进行扩展和优化。
