页面多实例图片点击切换：如何通过data-id实现独立控制

没问题，我来帮你搞定多个图片独立切换的需求！原来的代码用了全局变量，导致所有图片共用同一个状态，这就是为啥只能控制单个图片的原因。咱们可以通过给每个图片绑定自身状态的方式来解决，下面给你两种可行的方案：

方案1：基于你原有的内联事件改造（快速适配） #

这种方式不用大改你现有的HTML结构，只需要调整函数逻辑，让每个图片维护自己的切换状态：

第一步：修改HTML结构 #

给每个img标签加上data-id（用来标识不同图片，可选但方便后续扩展），同时把当前元素传递给点击函数：

<!-- 第1张图片 -->
<img data-id="1" src="img/icon-like.svg" onclick="swapImage(this)" width="16px">
<!-- 第2张图片 -->
<img data-id="2" src="img/icon-like.svg" onclick="swapImage(this)" width="16px">
<!-- 剩下4张同理，data-id依次设为3-6 -->

第二步：重写JavaScript函数 #

去掉全局变量，直接操作点击的图片元素，通过判断当前src来切换状态：

function swapImage(imgElement) {
  // 检查当前图片的未点赞状态
  if (imgElement.src.includes('icon-like.svg')) {
    // 切换为已点赞图标
    imgElement.src = 'img/icon-liked.svg';
  } else {
    // 切换回未点赞图标
    imgElement.src = 'img/icon-like.svg';
  }
  
  // 如果需要用data-id做额外操作（比如提交后端），可以这样获取：
  // const imageId = imgElement.dataset.id;
  // console.log('操作的图片ID:', imageId);
}

方案2：更现代的事件监听方式（推荐） #

这种方式把HTML和JavaScript逻辑分离，更易维护，也更符合前端最佳实践：

第一步：修改HTML结构 #

给所有点赞图片加统一的类名，保留data-id，去掉内联onclick：

<img data-id="1" class="like-image" src="img/icon-like.svg" width="16px">
<img data-id="2" class="like-image" src="img/icon-like.svg" width="16px">
<!-- 剩下4张同理 -->

第二步：编写JavaScript逻辑 #

通过类名批量获取图片，给每个图片绑定点击事件：

// 获取所有点赞图片元素
const likeImages = document.querySelectorAll('.like-image');

// 给每个图片添加点击监听
likeImages.forEach(img => {
  img.addEventListener('click', function() {
    // 切换图片源
    if (this.src.includes('icon-like.svg')) {
      this.src = 'img/icon-liked.svg';
    } else {
      this.src = 'img/icon-like.svg';
    }
    
    // 获取当前图片的data-id，方便后续扩展
    const currentImageId = this.dataset.id;
    console.log('点击了图片ID:', currentImageId);
  });
});

核心原理说明 #

原来的全局变量q会被所有图片共用，点击任何一张都会改变这个变量的值，导致状态混乱。现在的方案是让每个图片自己维护切换状态，通过this（或传递的元素参数）直接操作当前点击的图片，完全独立于其他图片，这样6张图片就能各自独立切换啦！

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