使用jQuery实现图片点击放大，多图场景下功能失效求助

我写了一个点击放大图片的简短函数，只用单张图片时一切正常，但添加第二张图片后功能就失效了。

原代码 #

jQuery代码 #

var classes = ["zoom0", "zoom50", "zoom100"];
var index = 0;
var classList = document.querySelector(".bla").classList;
const len = classes.length;
$('.zoom-img').click(function() {
  classList.replace(classes[index++ % len], classes[index % len]);
});

HTML代码 #

<!--单张时正常-->
<div class="zoom-img">
  <div class="zoom0 bla">
    <img src="https://img.lemde.fr/2022/09/27/468/0/2800/1400/1600/800/60/0/4a83504_1664286495065-113206.jpg">
  </div>
</div>
<!--添加后失效-->
<div class="zoom-img">
  <div class="zoom0 bla">
    <img src="https://img.lemde.fr/2022/09/27/468/0/2800/1400/1600/800/60/0/4a83504_1664286495065-113206.jpg">
  </div>
</div>

问题原因 #

1. 全局元素匹配错误：document.querySelector(".bla")只会选中页面中第一个带有bla类的元素，所以不管点击哪张图片，只有第一张会被修改，第二张完全没参与逻辑。
2. 全局索引冲突：index是全局变量，所有图片共享这个值，点击任意一张都会让索引递增，导致状态混乱。

解决方案 #

方案一：根据当前元素的类动态计算索引 #

var classes = ["zoom0", "zoom50", "zoom100"];
const len = classes.length;

$('.zoom-img').click(function() {
  // 获取当前点击元素内部的.bla元素
  const blaElement = $(this).find('.bla')[0];
  const classList = blaElement.classList;
  
  // 找到当前生效的类在数组中的位置
  const currentIndex = classes.findIndex(cls => classList.contains(cls));
  // 计算下一个要切换的类的索引
  const nextIndex = (currentIndex + 1) % len;
  
  // 替换类实现缩放
  classList.replace(classes[currentIndex], classes[nextIndex]);
});

方案二：给每个图片单独存储索引 #

var classes = ["zoom0", "zoom50", "zoom100"];
const len = classes.length;

// 初始化每个图片的初始索引
$('.zoom-img').each(function() {
  $(this).data('zoomIndex', 0);
});

$('.zoom-img').click(function() {
  const $imgContainer = $(this);
  // 获取当前图片的索引
  let currentIndex = $imgContainer.data('zoomIndex');
  const blaElement = $imgContainer.find('.bla')[0];
  
  // 替换类
  blaElement.classList.replace(classes[currentIndex], classes[(currentIndex + 1) % len]);
  // 更新当前图片的索引
  $imgContainer.data('zoomIndex', (currentIndex + 1) % len);
});

两种方案都能让每张图片独立响应点击，各自维护缩放状态：

• 方案一不需要额外存储数据，每次点击时通过当前类计算下一个状态，适合简单场景；
• 方案二用data方法给每个容器绑定独立索引，逻辑更清晰，扩展性更强。

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