点击图片更新输入框：实现取消选中时移除对应名称

你可以通过统一收集所有选中状态的姓名来实现添加和移除的逻辑，这种方式比单独处理添加、移除分支更健壮，也能避免字符串操作的边界问题。

修改后的代码实现 #

JavaScript 部分

$('#userImage').on('click', '.image', function() {
    // 切换当前图片容器的选中状态
    $(this).toggleClass('active');
    
    // 收集所有选中的姓名：转小写 + 去重
    const selectedNames = $('.image.active').map(function() {
        return $(this).find('figcaption').text().toLowerCase();
    }).get().filter((name, idx, arr) => arr.indexOf(name) === idx);
    
    // 更新输入框，用逗号分隔姓名
    $('.username').val(selectedNames.join(','));
});

补充高亮选中状态的 CSS（可选）

.image.active {
    border: 2px solid #2196F3;
    border-radius: 4px;
    background-color: rgba(33, 150, 243, 0.1);
}

为什么这么改？ #

1. 避免字符串操作的坑：原代码直接拼接/切割字符串，容易出现姓名包含逗号、重复添加、移除时匹配不准确等问题；统一收集选中项的方式从根源上解决了这些问题。
2. 逻辑更简洁：不管是添加还是移除，只需要重新获取所有选中的姓名，再更新输入框即可，不用分多个条件分支判断。
3. 事件绑定更准确：把点击事件绑定到.image容器上，避免点击img或figcaption时出现的目标元素不匹配问题。

原代码的问题说明 #

原代码只处理了「选中图片添加姓名」的逻辑，没有实现「取消选中时移除对应姓名」的分支；同时$('.username').val() == 0的判断不准确（输入框值是字符串，应该判断是否为空字符串），用新的方式可以完全规避这些问题。

内容的提问来源于stack exchange，提问作者WIverson97