ASP.NET Razor：如何获取foreach循环绑定图片的点击src用于JS函数

嘿，这个问题我碰到过好多次了！核心原因大多是事件绑定的时候没正确关联到当前点击的图片元素，或者你可能给所有循环出来的图片用了同一个ID，导致JS每次都只拿到第一个匹配的元素。下面给你几个靠谱的解决办法：

方法1：事件委托（最推荐，性能拉满） #

事件委托是把点击事件绑定到图片的父容器上，而不是给每张图片单独绑事件——这样不管后续动态新增多少图片，逻辑都能生效，还能避免循环绑定的性能浪费。

示例代码 #

<!-- 假设你的循环渲染结构是这样的 -->
<div class="image-gallery">
    @foreach(var imgItem in Model.Images)
    {
        <img src="@imgItem.ImageUrl" class="gallery-img" alt="@imgItem.AltText" />
    }
</div>

<!-- 用来显示大图的目标div -->
<div id="preview-box"></div>

// 获取父容器和预览容器
const galleryContainer = document.querySelector('.image-gallery');
const previewBox = document.getElementById('preview-box');

// 给父容器绑定点击事件
galleryContainer.addEventListener('click', function(e) {
    // 先判断点击的是不是我们要的图片
    if (e.target.classList.contains('gallery-img')) {
        // 拿到当前点击图片的src
        const targetSrc = e.target.src;
        // 把图片插入到预览div里
        previewBox.innerHTML = `<img src="${targetSrc}" style="max-width: 100%; height: auto;" />`;
    }
});

原理是利用事件冒泡：父容器能捕获到子元素的点击事件，通过e.target就能精准拿到当前被点击的图片，完美避开循环里的作用域陷阱。

方法2：循环绑定单个事件（传统写法） #

如果不想用事件委托，那要注意循环绑定事件时的变量作用域——别用var声明变量（会有作用域提升问题），改用let/const确保每次循环都拿到当前图片的引用。

示例代码 #

@foreach(var imgItem in Model.Images)
{
    <img src="@imgItem.ImageUrl" class="gallery-img" alt="@imgItem.AltText" />
}

<div id="preview-box"></div>

const allImages = document.querySelectorAll('.gallery-img');
const previewBox = document.getElementById('preview-box');

// 遍历每张图片绑定点击事件
allImages.forEach(img => {
    img.addEventListener('click', function() {
        // 用this或者直接用img都能拿到当前点击的图片src
        const targetSrc = this.src;
        previewBox.innerHTML = `<img src="${targetSrc}" style="max-width: 100%; height: auto;" />`;
    });
});

方法3：用data属性存地址（适配多场景） #

如果你的缩略图和原图地址不一样，或者需要额外存图片信息，可以给图片加data-src属性，点击时读取这个属性值：

示例代码 #

@foreach(var imgItem in Model.Images)
{
    <!-- 缩略图用src，原图地址存在data-src里 -->
    <img src="@imgItem.ThumbUrl" data-src="@imgItem.FullUrl" class="gallery-img" alt="@imgItem.AltText" />
}

galleryContainer.addEventListener('click', function(e) {
    if (e.target.classList.contains('gallery-img')) {
        // 读取data属性里的原图地址
        const targetSrc = e.target.dataset.src;
        previewBox.innerHTML = `<img src="${targetSrc}" style="max-width: 100%; height: auto;" />`;
    }
});

最后提醒个坑：绝对不要给循环出来的元素用重复的ID！比如<img id="my-img" ...>这种写法，document.getElementById只会返回第一个匹配的元素，这也是你之前点击任何图片都取到第一张的常见原因！

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