本文详细介绍了如何使用 JavaScript 实现多条件筛选功能，特别是针对不同筛选类别（如颜色和尺寸）之间采用“与”（AND）逻辑，而同一类别内采用“或”（OR）逻辑的场景。通过清晰的 HTML 结构和优化的 JavaScript 代码，教程展示了如何有效管理用户选择，并动态更新产品列表的显示，确保筛选结果的准确性和灵活性。
在现代网页应用中，动态筛选是提升用户体验的关键功能之一。当涉及到多个筛选维度时，如何正确处理不同维度之间的逻辑关系（如“与”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 多条件筛选 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; }颜色
尺寸
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();筛选结果
产品 A产品 B产品 C产品 D
注意事项与扩展
数据属性格式约定： 当前示例中 data-colors=”blue large” 依赖于颜色和尺寸的固定顺序。如果产品属性更多或顺序不固定，建议使用更明确的数据属性，例如 data-color=”blue” 和 data-size=”large”。这样在 JavaScript 中获取时会更清晰和健壮：
// HTML产品 A// JavaScriptconst 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 中实现复杂多条件筛选的核心逻辑，并能根据实际需求进行扩展和优化。
以上就是JavaScript 多条件筛选实现：AND/OR 逻辑的应用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1516129.html
微信扫一扫 
支付宝扫一扫 
