foreach循环中图片缩放异常：点击任意图片均放大最后一张

问题根源 #

你当前的代码在foreach循环里给所有图片都设置了相同的id="obrazekcontainer"，而document.getElementById()只会返回页面中最后一个匹配该id的元素，所以不管点击哪张图，操作的都是最后一张。

解决方案1：点击时传递当前图片元素（简单直接） #

修改Razor代码中的图片标签 #

把onclick事件改成传递当前元素this，同时移除重复的id（id必须唯一，此处无需保留）：

// 替换原else分支里的img标签代码
<img class="obrprofil" onclick="ZvetsitObrazekProfil(this)" src="@dr1[1]" />

修改JavaScript函数 #

直接接收传递过来的图片元素，对其进行缩放操作：

function ZvetsitObrazekProfil(imgElement) {
    if (imgElement.style.transform === "scale(1.8)") {
        imgElement.style.transform = "scale(1)";
    } else {
        imgElement.style.transform = "scale(1.8)";
    }
}

解决方案2：使用事件委托（更优雅，适合大量元素） #

如果页面图片数量较多，事件委托能减少内存占用，无需给每个图片单独绑定事件。

第一步：修正容器的重复id问题 #

移除循环中生成的profilepostIMG容器的重复id，仅保留class：

// 原代码的<div class="profilepostIMG" id="obrazekcontainerProfil">修改为
<div class="profilepostIMG">

第二步：添加事件委托的JavaScript代码 #

在页面底部添加这段代码，同时删除图片标签上的onclick属性和重复id：

// 监听所有图片容器内的点击事件
document.querySelectorAll('.profilepostIMG').forEach(container => {
    container.addEventListener('click', function(e) {
        // 判断点击目标是图片元素
        if (e.target.classList.contains('obrprofil')) {
            const img = e.target;
            if (img.style.transform === "scale(1.8)") {
                img.style.transform = "scale(1)";
            } else {
                img.style.transform = "scale(1.8)";
            }
        }
    });
});

额外优化建议 #

• 给图片添加CSS过渡效果，让缩放更平滑：

.obrprofil {
    transition: transform 0.3s ease;
    cursor: zoom-in;
}

• 永远避免在循环中生成重复id：页面中所有元素的id必须唯一，重复id会导致DOM操作异常，是前端开发的基础规范。

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