如何给两张图片绑定同一函数实现点击单独缩放？

你遇到的问题核心是JS代码没有精准定位到点击的那张图片，而是操作了全局匹配到的图片（比如第一张或者所有图片）。下面直接给你修正方案和代码示例：

核心思路 #

让点击事件能精准拿到当前被点击的图片元素，然后只对这张元素进行样式切换，不要去操作其他图片。

方案一：通过this传递点击元素（简单直接） #

修正后的HTML #

<img src="图1地址" class="zoom-img" onclick="toggleSize(this)" />
<img src="图2地址" class="zoom-img" onclick="toggleSize(this)" />

对应的CSS（保持缩放过渡效果） #

.zoom-img {
  width: 200px;
  transition: width 0.3s ease;
  cursor: pointer;
}

.zoom-img.big {
  width: 400px;
}

修正后的JavaScript #

function toggleSize(targetImg) {
  // 只给当前点击的图片切换样式类
  targetImg.classList.toggle('big');
}

方案二：事件委托（更适合多图片场景） #

如果后续还要加更多图片，不用逐个绑定事件，直接给父容器加监听：

HTML #

<div class="img-wrap">
  <img src="图1地址" class="zoom-img" />
  <img src="图2地址" class="zoom-img" />
</div>

JavaScript #

// 监听父容器的点击事件
document.querySelector('.img-wrap').addEventListener('click', function(e) {
  // 确认点击的是目标图片
  if (e.target.classList.contains('zoom-img')) {
    // 只切换当前点击图片的样式
    e.target.classList.toggle('big');
  }
});

两种方案的原理都是精准获取触发点击事件的图片元素，只对它进行样式修改，不会影响其他图片，这样点击哪张就只会缩放哪张。

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