jQuery点击事件触发异常求助：图片文件名切换功能异常

问题根源分析 #

1. DOM遍历逻辑错误：原代码中target.next('span.truncated')完全不符合DOM结构——你点击的就是.truncated元素，它的兄弟元素是.full而非另一个.truncated，这导致添加hidden类的操作根本找不到目标元素，自然无法执行。
2. 目标元素获取错误：使用e.originalEvent.target属于冗余操作，直接用$(this)就能准确获取当前被点击的.truncated元素，避免事件目标误判。
3. 事件绑定写法不规范：jQuery中委托事件的标准写法是$(document).on('click', '.truncated', handler)，原写法虽然部分版本兼容，但易引发歧义。

优化代码实现 #

基础版（点击截断文件名显示完整名称） #

$(document).on('click', '.truncated', function() {
  const $truncated = $(this);
  // 隐藏当前截断文件名
  $truncated.addClass('hidden');
  // 显示对应的完整文件名（兄弟元素）
  $truncated.siblings('.full').removeClass('hidden');
});

进阶版（支持点击切换显示/隐藏） #

如果需要支持再次点击完整文件名切回截断显示，可扩展逻辑：

$(document).on('click', '.truncated, .full', function() {
  const $container = $(this).closest('.dz-filename'); // 基于Dropzone默认容器类定位
  const $truncated = $container.find('.truncated');
  const $full = $container.find('.full');
  
  // 切换两个元素的hidden类
  $truncated.toggleClass('hidden');
  $full.toggleClass('hidden');
});

多图片隔离保障要点 #

• 利用父容器定位：通过closest()找到当前图片对应的文件名容器，确保操作仅作用于当前图片的文件名元素，不会影响其他上传的图片。
• 避免全局选择器：永远不要直接用$('.full')这种全局选择器，必须基于点击元素的上下文去查找目标元素。

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