JavaScript点击放大镜图标仅显示单张图片的问题求助

问题原因 #

你当前的代码逻辑存在问题：每次点击放大镜时，会遍历所有图片元素，把每一张的src依次赋值给imagePage的背景图，最后自然只会显示最后一张图片——因为前面的赋值都被最后一次操作覆盖了。

修复方案 #

不需要遍历所有图片，只要找到当前点击的放大镜对应的那张图片即可。利用DOM的层级关系，从点击的图标出发，定位到它所在的.card容器里的图片元素：

function getPics() {}
const imgs = document.querySelectorAll('.card img');
const fullPage = document.querySelector('#full-page');
const imagePage = document.querySelector('#image-page');
const glasses = document.querySelectorAll('.card .mglass i');

glasses.forEach(i => {
  i.addEventListener('click', function() {
    // 找到当前点击图标所在的card容器里的img元素
    const targetImg = this.closest('.card').querySelector('img');
    // 设置背景图为对应图片的src
    imagePage.style.backgroundImage = `url(${targetImg.src})`;
    fullPage.style.display = 'block';
  });
});

逻辑说明 #

• this.closest('.card')：从当前点击的<i>元素向上查找最近的.card父容器，确保能精准定位到包含目标图片的容器。
• 再通过querySelector('img')拿到该容器内的图片元素，获取它的src赋值给大图容器的背景图。

这样修改后，点击每个放大镜就会显示对应的图片了。

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