如何修改JS代码实现多Gallery实例？原代码仅支持单实例

核心思路是通过document.querySelectorAll('.interact-img')选中所有画廊容器，再用forEach遍历每个容器，为每个实例独立初始化交互逻辑，避免全局变量和元素选择的冲突。

具体改造步骤 #

• 选中所有画廊容器：用querySelectorAll获取页面中所有带.interact-img类的元素
• 遍历每个实例：通过forEach循环处理每个画廊容器，循环内的变量仅作用于当前实例
• 局部元素查找：所有内部元素（如图片、标题）的查找都基于当前画廊容器（gallery.querySelector），而非全局查找
• 独立绑定交互与动画：在循环内为当前实例的图片绑定事件，并编写GSAP动画逻辑，确保每个实例的动画独立运行

改造后的示例代码 #

假设你的画廊结构如下（每个实例结构一致）：

<div class="interact-img">
  <img src="image1.jpg" alt="图1">
  <div class="caption">图片1标题</div>
</div>
<div class="interact-img">
  <img src="image2.jpg" alt="图2">
  <div class="caption">图片2标题</div>
</div>

对应的JS代码：

// 遍历所有画廊实例
document.querySelectorAll('.interact-img').forEach(gallery => {
  // 仅在当前画廊内查找元素
  const images = gallery.querySelectorAll('img');
  const caption = gallery.querySelector('.caption');

  // 初始化当前实例的GSAP动画与交互
  images.forEach(img => {
    // 鼠标进入事件
    img.addEventListener('mouseenter', () => {
      gsap.to(img, { 
        scale: 1.1, 
        duration: 0.3, 
        ease: 'power2.out' 
      });
      gsap.to(caption, { 
        opacity: 1, 
        y: 0, 
        duration: 0.3, 
        ease: 'power2.out' 
      });
    });

    // 鼠标离开事件
    img.addEventListener('mouseleave', () => {
      gsap.to(img, { 
        scale: 1, 
        duration: 0.3, 
        ease: 'power2.in' 
      });
      gsap.to(caption, { 
        opacity: 0, 
        y: 10, 
        duration: 0.3, 
        ease: 'power2.in' 
      });
    });
  });
});

关键注意事项 #

• 结构一致性：确保所有.interact-img实例的内部DOM结构完全一致（比如图片、标题的类名统一），否则局部查找会失效
• 变量局部化：所有和当前实例相关的变量（如images、caption）必须放在forEach循环内部，避免全局变量覆盖导致的冲突
• 动画作用域：GSAP的to方法目标必须是当前实例内的元素，不能用全局选择器（比如document.querySelector('.caption')），否则会影响所有实例

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