实现点击图片动态增删输入框中的姓名列表-js教程-PHP中文网

本文介绍如何通过 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() 防止
Bob Smith
导致 ' bob smith ' 无法匹配；

includes() 判断避免重复添加，indexOf() + splice() 确保只删一次且位置准确；

输入框值由数组 join(', ') 生成，天然避免手动拼接引发的多余逗号或首尾空格问题。