使用JavaScript实现单按钮切换图片：点击按钮无法切回初始图片的问题

你遇到的这个切换问题很典型，咱们逐个拆解你两段代码的问题，再给出修复方案，顺便帮你做好后续扩展多图的准备~

第一段代码的问题 #

你用current__img.src和相对路径image1（"Images/image1.jpg"）做比较，但浏览器里img.src返回的是完整的绝对URL（比如http://localhost:xxxx/Images/image1.jpg），和你写的相对路径永远不相等。第一次点击后，条件current__img.src != image1永远为真，所以只会一直设置成image2，切不回image1。

修复方案1：修正路径判断逻辑 #

可以用getAttribute('src')获取原始的相对路径，或者用includes()判断当前URL是否包含目标相对路径：

const current__img = document.getElementById("enrollment__img1"); 
function changeimage() { 
  const image1 = "Images/image1.jpg"; 
  const image2 = "Images/image2.jpg"; 
  // 用getAttribute获取原始设置的相对路径做比较
  if (current__img.getAttribute('src') === image1) { 
    current__img.src = image2; 
  } else { 
    current__img.src = image1; 
  } 
}

或者用includes兼容绝对路径的场景：

const current__img = document.getElementById("enrollment__img1"); 
function changeimage() { 
  const image1 = "Images/image1.jpg"; 
  const image2 = "Images/image2.jpg"; 
  if (current__img.src.includes(image1)) { 
    current__img.src = image2; 
  } else { 
    current__img.src = image1; 
  } 
}

第二段代码的问题 #

你把firstcounter声明在changeimage函数内部了，每次点击按钮调用函数时，这个变量都会被重新初始化为0，所以永远只会执行current__img.src = image2;这一行，计数器根本没法累加，自然切不回去。

修复方案2：把计数器变量放到函数外部 #

把状态变量提升到全局（或者用闭包），这样每次点击都会保留之前的状态：

const current__img = document.getElementById("enrollment__img1"); 
let firstcounter = 0; // 放到函数外面，保持状态不重置
function changeimage() { 
  const image1 = "Images/image1.jpg"; 
  const image2 = "Images/image2.jpg"; 
  if (firstcounter === 0) { 
    current__img.src = image2; 
    firstcounter++; 
  } else { 
    firstcounter--; 
    current__img.src = image1; 
  } 
}

扩展：为后续添加更多图片做准备 #

如果之后要加更多图片，用数组管理会更高效，不用写一堆if-else：

const current__img = document.getElementById("enrollment__img1"); 
// 把所有图片路径统一放到数组里
const images = ["Images/image1.jpg", "Images/image2.jpg", "Images/image3.jpg"];
let currentIndex = 0; // 当前显示的图片索引

function changeimage() { 
  // 索引循环：到最后一张后自动回到第一张
  currentIndex = (currentIndex + 1) % images.length;
  current__img.src = images[currentIndex];
}

这样不管你后续加多少张图片，只要往images数组里新增路径就行，按钮点击逻辑完全不用改~

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