点击修改类内图片源报错：Cannot set property 'src' of undefined

嘿，我来帮你搞定这个问题！你遇到的Cannot set property 'src' of undefined错误，根源在于JavaScript中var声明变量的作用域特性，我给你拆解一下原因，再提供几种简单的解决方案：

错误原因分析 #

当你用var i声明循环变量时，i是函数级作用域的变量——也就是说整个循环里只有一个i。当循环结束后，i的值会变成seatsUnclicked.length（也就是你例子里的7）。这时候用户点击图片触发事件，代码去访问seatsUnclicked[i]，自然就找不到对应的元素，返回undefined了。

解决方案 #

方案1：用this直接指向当前点击的元素（最推荐） #

点击事件的回调函数中，this会自动指向被点击的图片元素，直接用它来修改src就好，完全不用关心索引：

const seatsUnclicked = document.getElementsByClassName("seat-unique");
for(var i = 0; i < seatsUnclicked.length; i++) {
  seatsUnclicked[i].onclick = function(){
    this.src = "chairhover.svg";
  }
}

方案2：用let替代var声明循环变量 #

let是ES6新增的块级作用域变量，每次循环都会创建一个独立的i，点击时能拿到当前循环对应的索引：

const seatsUnclicked = document.getElementsByClassName("seat-unique");
for(let i = 0; i < seatsUnclicked.length; i++) {
  seatsUnclicked[i].onclick = function(){
    seatsUnclicked[i].src = "chairhover.svg";
  }
}

方案3：用闭包保存循环索引（兼容旧环境） #

如果需要兼容不支持ES6的旧浏览器，可以用闭包把每次循环的索引封装起来：

const seatsUnclicked = document.getElementsByClassName("seat-unique");
for(var i = 0; i < seatsUnclicked.length; i++) {
  (function(index) {
    seatsUnclicked[index].onclick = function(){
      seatsUnclicked[index].src = "chairhover.svg";
    }
  })(i);
}

后续扩展：鼠标悬停切换图片的思路 #

等你搞定点击功能后，要实现悬停切换也很简单，只需要给元素绑定onmouseover和onmouseout事件就行。这里给你一个参考示例（基于方案1的写法）：

const seatsUnclicked = document.getElementsByClassName("seat-unique");
for(var i = 0; i < seatsUnclicked.length; i++) {
  const seat = seatsUnclicked[i];
  
  // 点击切换为选中状态的图片
  seat.onclick = function(){
    this.src = "chairclicked.svg"; // 假设你有一个点击后的图标
  }
  
  // 鼠标悬停切换为hover图片（未点击时才生效）
  seat.onmouseover = function(){
    if(!this.src.includes("chairclicked.svg")) {
      this.src = "chairhover.svg";
    }
  }
  
  // 鼠标离开恢复原图（未点击时才生效）
  seat.onmouseout = function(){
    if(!this.src.includes("chairclicked.svg")) {
      this.src = "chair.svg";
    }
  }
}

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