本文详解如何在食品配送网站中构建响应式菜单筛选系统：支持多类别勾选过滤、实时重排分页（每页固定15项），并确保筛选后首页自动填充符合条件的全部产品，而非仅限原始页面数据。
本文详解如何在食品配送网站中构建响应式菜单筛选系统：支持多类别勾选过滤、实时重排分页（每页固定15项），并确保筛选后首页自动填充符合条件的全部产品，而非仅限原始页面数据。
在构建食品餐饮类网站时，一个健壮的菜单筛选与分页系统至关重要——它既要让用户快速定位目标商品（如“Salty”或“Salad”），又需保证交互体验流畅：筛选后结果应重新聚合、按需分页，而非简单隐藏当前页之外的匹配项。原方案的核心问题在于分页逻辑仍基于原始 DOM 节点索引（index）进行判断，而未对筛选后的有效商品集合做动态重映射，导致“Salty”筛选仅显示第 1 页中原本就存在的咸味产品（如 Salty Food 1/6/8），却遗漏了第 2 页及之后的 Salty Food 16/21/23 等。
✅ 正确解法：分离「筛选」与「分页」逻辑
关键改进在于：先通过 CSS 选择器精准获取当前所有匹配商品，再在此子集上执行分页渲染。我们利用现代 CSS 的 :where() 伪类动态拼接选择器，配合 classList 控制显隐，彻底解耦数据过滤与视图展示：
function updateProducts() {
const selectedCategories = Array.from(categoryCheckboxes)
.filter(checkbox => checkbox.checked)
.map(checkbox => checkbox.value);
// 构建动态选择器：.product 或 .product:where(.salty, .sweet, ...)
let selector = '.product';
if (selectedCategories.length > 0) {
selector += ':where(.' + selectedCategories.join(', .') + ')';
}
// 1. 先隐藏所有商品（添加 .filtered 类）
products.forEach(product => product.classList.add('filtered'));
// 2. 获取当前筛选结果（真实 DOM 集合）
filteredProducts = document.querySelectorAll(selector);
// 3. 校准当前页码（避免越界）
const totalPages = Math.ceil(filteredProducts.length / productsPerPage);
currentPage = Math.min(currentPage, totalPages || 1);
// 4. 仅显示当前页对应范围的商品
filteredProducts.forEach((product, index) => {
if (index >= (currentPage - 1) * productsPerPage &&
index < currentPage * productsPerPage) {
product.classList.remove('filtered');
}
});
updatePagination();
}配套 CSS 极简高效：
.product { display: block; }
.product.filtered { display: none; } /* 统一控制隐藏 */⚠️ 注意事项与最佳实践
- 分页状态同步：每次筛选后必须重置 currentPage = 1（或至少校验边界），否则用户可能停留在无效页码（如原第 5 页，筛选后仅剩 2 页）。示例代码中通过 currentPage = Math.min(currentPage, totalPages || 1) 实现安全兜底。
- 性能优化：document.querySelectorAll() 在大数据量下可能有性能开销。若商品超百条，建议预先将产品数据结构化存储（如 const allProducts = [...document.querySelectorAll('.product')]），筛选时用 Array.filter() 处理内存数组，再批量更新 DOM。
- 无障碍支持：为分页按钮添加 aria-label（如 aria-label="Previous page"），并确保焦点管理；筛选变化时可触发 alert() 或 aria-live 区域通知屏幕阅读器。
- 扩展性提示：未来增加搜索框或价格区间筛选时，只需在 selector 构建逻辑中追加条件（如 input#search.value && selector +=[data-name*="${term}"]`），保持架构清晰。
✅ 总结
真正的「筛选后分页」不是隐藏不匹配项，而是重建可见商品序列，并从中切片。通过 :where() 动态选择器 + filteredProducts 真实集合 + classList 批量控制，你既能获得语义清晰、可维护性强的代码，又能交付符合用户直觉的专业体验——无论勾选多少分类，首页永远呈现最相关的 15 款美食。
