本文介绍如何通过 jquery 实现点击图片切换选中状态，并实时更新输入框中的姓名列表（支持添加与精准移除），避免重复、空格干扰和字符串操作缺陷。
本文介绍如何通过 jquery 实现点击图片切换选中状态，并实时更新输入框中的姓名列表（支持添加与精准移除），避免重复、空格干扰和字符串操作缺陷。
在构建多选式用户选择界面时，常见需求是：用户点击头像图片后，对应姓名自动加入输入框；再次点击则从列表中精确移除该姓名。原始代码直接操作字符串（如 indexOf 和 + "," + name），存在严重隐患——例如 "bob smith" 会被错误匹配到 "bob smithson" 中，且未处理前后空格、大小写不一致等问题，导致逻辑不可靠。
推荐采用状态管理 + 数组驱动的方式重构逻辑，核心思路是：
✅ 使用独立数组 users 维护当前已选姓名（纯净、去重、可索引）；
✅ 每次点击仅更新数组状态（push 或 splice），再统一 join(', ') 渲染到输入框；
✅ 完全规避字符串解析风险，保证增删精准、可预测。
以下是优化后的完整实现：
let users = [];
$('#userImage').on('click', 'figure img', function(e) {
const $img = $(e.target);
const $figure = $img.closest('figure');
const name = $figure.find('figcaption').text().trim().toLowerCase();
const $input = $('.username');
$img.toggleClass('active');
if ($img.hasClass('active')) {
// 若未存在则添加（自动去重）
if (!users.includes(name)) {
users.push(name);
}
} else {
// 精准移除对应项（仅移除第一个匹配项）
const index = users.indexOf(name);
if (index !== -1) {
users.splice(index, 1);
}
}
// 同步更新输入框，用逗号+空格分隔，提升可读性
$input.val(users.join(', '));
});? 关键改进说明：
jQuery 1.12.4下载jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
- 使用 $('#userImage').on('click', 'figure img', ...) 实现事件委托，兼容动态插入的图片；
- trim() 防止 <figcaption> Bob Smith </figcaption> 导致 ' bob smith ' 无法匹配；
- includes() 判断避免重复添加，indexOf() + splice() 确保只删一次且位置准确；
- 输入框值由数组 join(', ') 生成，天然避免手动拼接引发的多余逗号或首尾空格问题。
注意事项：
- 确保每张图片的 <figcaption> 内容唯一且规范（建议后端输出前标准化）；
- 如需支持中文名或特殊字符，无需额外处理，因 toLowerCase() 仅影响英文，而 includes() 对 Unicode 安全；
- 若需保留原始大小写显示，可将 name 存储为原始文本（去掉 .toLowerCase()），仅在比对逻辑中统一转换。
此方案结构清晰、健壮性强，适用于任意数量的图片选项，是前端多选标签类交互的推荐实践。
