JavaScript多图点击时获取src属性值的方法及问题排查

我帮你排查了下代码里的问题，主要有几个点导致多图片场景下功能失效：

• HTML结构错误：代码里存在多余的闭合</div>标签，会导致DOM结构混乱，影响元素定位
• 类名拼写不一致：JS里写的是dImg，但图片实际类名是dImage，匹配不到目标元素
• 未关联当前点击的图片：getElementsByClassName返回的是元素集合，直接取.src无法定位到当前点击的那张图

下面是修正后的完整代码，每一步修改都做了标注：

修正后的HTML代码 #

<div class="test"> 
  <a href="#" class="part-one" onclick="filename(this);" > 
    <img class="dImage" src="images/deckel-1.png" alt=""> 
  </a> 
  <a href="#" class="part-one" onclick="filename(this);" > 
    <img class="dImage" src="images/deckel-2.png" alt=""> 
  </a> 
  <a href="#" class="part-one" onclick="filename(this);" > 
    <img class="dImage" src="images/deckel-3.png" alt=""> 
  </a> 
</div>

修改说明：

• 清理了多余的</div>标签，保证DOM结构合法
• 给onclick事件传递this参数，this代表当前被点击的<a>标签，以此关联到对应的图片

修正后的JS代码 #

function filename(clickedElement){ 
  // 从当前点击的a标签中，找到对应的img元素
  const targetImg = clickedElement.querySelector('.dImage');
  // 获取当前图片的src属性值
  const fullPath = targetImg.src; 
  console.log('当前图片完整路径：', fullPath); 
  
  // 提取文件名（去掉路径部分）
  const filename = fullPath.replace(/^.*[\\\/]/, ''); 
  console.log('提取的文件名：', filename); 
  
  // 提取fileid（适配你当前的文件名格式：deckel-1.png）
  const fileid = filename.split("-")[1].split(".")[0];
  console.log('提取的fileid：', fileid); 
  
  // 如需跳转页面，可解开下面的注释
  // window.location.href = `web-rocketcreator.html?id=${fileid}`;
}

修改说明：

• 接收clickedElement参数，精准定位当前点击的元素上下文
• 通过querySelector从当前<a>标签内找到目标图片，确保获取的是点击的那张图的src
• 修正了类名拼写错误的问题
• 调整了fileid的提取逻辑，适配你实际的文件名格式（原正则逻辑不符合deckel-1.png的结构）

这样修改后，点击任意一张图片，就能正确获取到对应图片的src值，以及你需要的fileid了。

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