本文详解如何在 WordPress 前端通过 jQuery 实时收集复选框选中项，构建成结构化对象数组，按 state 字段自动排序，并去重渲染至模态框，兼顾性能与可维护性。
本文详解如何在 wordpress 前端通过 jquery 实时收集复选框选中项，构建成结构化对象数组，按 `state` 字段自动排序，并去重渲染至模态框，兼顾性能与可维护性。
在 WordPress 主题或插件开发中，常需实现「多选筛选 → 汇总预览 → 模态框展示」的交互流程。本文聚焦一个典型场景：用户勾选多个 .item 列表项（每个含 .state 标签），前端需动态生成形如 [{item: 'item123', state: 'state one'}, ...] 的对象数组，实时按 state 字母序升序排列，同时自动剔除重复项（避免同一商品被多次添加），最终将排序后的 DOM 元素克隆渲染至 .modal 容器中。
✅ 核心实现逻辑
我们摒弃简单遍历，采用三步闭环处理：
- 提取所有已勾选复选框（$checkboxes.filter(':checked')）；
- 构建带唯一键的对象数组，并同步去重（基于 value 或 data-id）；
- 按 state 排序后批量克隆 DOM，注入模态框。
以下是优化后的完整代码（兼容 WordPress jQuery 环境，已规避 $ 冲突风险）：
jQuery(document).ready(function($) {
const $modal = $('.modal');
const $checkboxes = $('.add-to-modal');
// 维护全局已添加项集合（用于去重）
const addedItems = new Set();
$checkboxes.on('change', function() {
// 1. 获取当前所有已勾选的 checkbox 元素
const $checked = $checkboxes.filter(':checked');
// 2. 构建去重 + 结构化对象数组
const objArray = [];
const uniqueItems = [];
$checked.each(function() {
const $cb = $(this);
const itemId = $cb.val() || $cb.closest('.item').data('id'); // 优先用 value，fallback 到 data-id
const $itemEl = $cb.closest('.item');
const stateText = $itemEl.find('.state').text().trim();
// ✅ 去重：仅当未添加过该 itemId 时才纳入
if (!addedItems.has(itemId)) {
addedItems.add(itemId);
objArray.push({
item: 'item' + itemId,
state: stateText
});
uniqueItems.push($itemEl.clone()); // 缓存克隆节点，避免重复 DOM 查询
}
});
// 3. 按 state 升序排序（稳定排序，支持中文/空格）
objArray.sort((a, b) => a.state.localeCompare(b.state));
// 4. 同步排序 DOM 节点：根据排序后的 objArray 顺序重组 uniqueItems
const sortedDOM = objArray.map(obj => {
const targetId = obj.item.replace('item', '');
return uniqueItems.find($el =>
$el.data('id') == targetId || $el.find('.add-to-modal').val() == targetId
) || null;
}).filter(Boolean); // 移除 null
// 5. 渲染到 modal（清空后插入）
$modal.empty().append(sortedDOM);
// ✅ 可选：调试输出结构化数据
console.log('Sorted & deduplicated items:', objArray);
});
// ? 补充：提供手动清空功能（例如点击“重置”按钮）
$('#reset-modal').on('click', function() {
$checkboxes.prop('checked', false);
$modal.empty();
addedItems.clear();
});
});⚠️ 关键注意事项
- 去重机制：使用 Set 存储 itemId（推荐从 或 data-id="123" 提取），确保同一商品无论勾选多少次，只计入一次；
- 排序健壮性：使用 String.prototype.localeCompare() 替代 >/
- DOM 性能优化：先批量克隆 .item 元素，再按序拼接，避免在循环中反复操作 DOM；
- WordPress 兼容性：包裹在 jQuery(document).ready() 中，并显式传入 $ 参数，防止与其它库冲突；
- HTML 结构要求：每个 .item 必须有唯一标识（value 或 data-id），且状态文本必须位于 .state 元素内。
? 扩展建议
若后续需支持多字段排序（如先按 state，再按 city），可升级 sort() 回调：
objArray.sort((a, b) => a.state.localeCompare(b.state) || a.city.localeCompare(b.city) );
此外，为提升用户体验，可添加过渡动画、空状态提示，或结合 localStorage 记住用户上次选择。
通过本方案，你将获得一个可复用、易扩展、符合现代前端实践的 WordPress 多选聚合组件——结构清晰、逻辑严谨、一次集成，长期受益。
