点击<div>触发的切换<img> src的JavaScript函数无法生效求助

DevOps 小满

2026-8-2

问题分析与解决方案

核心问题：图片src判断逻辑失效

你的fun1函数里直接用document.getElementById("eye").src和"eye.png"/"eyec.png"对比是错误的。浏览器会把相对路径自动转换成完整的绝对URL（比如http://localhost/eye.png），所以这两个字符串永远不会匹配，导致图片切换功能完全不起作用。

修复方案

方案1：获取原始相对路径

用getAttribute("src")获取标签上写的原始相对路径，再做判断：

function fun1() {
  const eyeImg = document.getElementById("eye");
  const currentSrc = eyeImg.getAttribute("src");
  if (currentSrc === "eyec.png") {
    eyeImg.setAttribute("src", "eye.png");
  } else {
    eyeImg.setAttribute("src", "eyec.png");
  }
}

方案2：判断URL末尾的文件名（更稳健）

如果页面部署路径可能变化，推荐通过检查URL结尾的文件名来实现：

function fun1() {
  const eyeImg = document.getElementById("eye");
  if (eyeImg.src.endsWith("eyec.png")) {
    eyeImg.src = "eye.png";
  } else {
    eyeImg.src = "eyec.png";
  }
}

额外优化建议

缓存DOM元素：避免每次调用函数都重复查询DOM，提升性能：

// 提前获取元素，避免重复查询
const passwordInput = document.getElementById("password");
const eyeImg = document.getElementById("eye");

function eye() {
  togglePasswordType();
  toggleEyeIcon();
}

function togglePasswordType() {
  passwordInput.type = passwordInput.type === "text" ? "password" : "text";
}

function toggleEyeIcon() {
  eyeImg.src = eyeImg.src.endsWith("eyec.png") ? "eye.png" : "eyec.png";
}