JavaScript文件名选择应用仅返回首个元素问题排查求助

数据老陈

2026-4-28

问题原因与解决方案

嘿，我一眼就发现问题出在哪了！

错误核心原因

你在点击事件的回调函数里，用了document.querySelector(".foto").src来获取图片路径——但querySelector()方法只会返回页面中第一个匹配指定选择器的元素。所以不管你点击哪张图片，拿到的永远是第一张图（step1.png）的路径，自然显示的总是第一个文件名。

修复方案

我们只需要把获取当前点击图片的方式改成指向触发事件的那个元素就行，这里有两种简单的方法：

方法1：用`this`关键字

在事件回调里，this会自动指代触发点击事件的图片元素，直接用它来获取src路径：

var pic = document.querySelectorAll(".foto");
for (var i = 0; i < pic.length; i++) {
  pic[i].addEventListener(
    "click",
    function () {
      var fullPath = this.src; // 这里改用this指代当前点击的图片
      var filename = fullPath.replace(/^.*[\\\/]/, "");
      document.querySelector(".picName").textContent = "File name:" + filename.substring(0, filename.lastIndexOf(".")) || filename;
    },
    false
  );
}

方法2：用事件对象的`target`属性

如果你更习惯用事件对象，也可以通过event.target来获取当前点击的元素：

var pic = document.querySelectorAll(".foto");
for (var i = 0; i < pic.length; i++) {
  pic[i].addEventListener(
    "click",
    function (event) { // 接收事件参数
      var fullPath = event.target.src; // 用event.target获取当前点击的图片
      var filename = fullPath.replace(/^.*[\\\/]/, "");
      document.querySelector(".picName").textContent = "File name:" + filename.substring(0, filename.lastIndexOf(".")) || filename;
    },
    false
  );
}