Javascript 使用Umbraco无法正确显示图像

因此，当你点击拇指图像时，我试图在一个模态中显示一组图像。我正在使用W3CSS样式表来创建模式。基本上，当我显示页面时，所有的拇指都可以正常工作。但是，当我单击它时，拇指显示良好，但其余图像来自第一个项目。不会显示具有其他图像的其他项目。我会把代码片段放进去，并留下一个到当前页面的链接，这样你就可以看到我在说什么，如果它很难理解的话

    @inherits Umbraco.Web.Macros.PartialViewMacroPage
@{
  <link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
  var selection = CurrentPage.Children;
  int index = 1;
  int count = selection.Count();

  foreach (var category in selection)
  {
var items = category.Children;

      @*Goes through the group of items*@
    @foreach (var item in items)
    {


            @*If there is an image thumbnail for the item then diisplay it*@
        @if (item.ThumbImage.Length > 1)
        {

            <div class="w3-display-container" style="height:100px;">
            <img src="@Umbraco.TypedMedia(item.ThumbImage).Url" onclick="onClick(this)" class="w3-hover-opacity w3-third w3-display-middle">
            </div>
                <div id="modal01" class="w3-modal w3-animate-zoom" onclick="this.style.display='none'">

                    <img class="w3-modal-content" id="img01" />

                    @if(item.Images.Length > 1)
                    {   
                    var imagesList = item.GetPropertyValue<string>("Images").Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries);                        
                    var imagesCollection = Umbraco.TypedMedia(imagesList);

                    foreach (var imageItem in imagesCollection)
                    {     

                        <img class="w3-modal-content" id="img01" src="@imageItem.Url" />

                    }

                    }

              </div>
                            }

        @*<a href="@file.Url" target="_blank">Download brochure</a>
          <ul>
          <li><a href="@file.Url" target="_blank"><i class="fa fa-file-pdf-o"></i><br />@fileSize</a></li>
        </ul>*@
    </div>
   }
  </div>
  <div class="clear"></div>
</div>
      @*Go through the loop again*@
index++;
      @*If index is equal to count section off the category*@
if (index == count)
{ <hr /> }    
  }  
}

@{
<script>
function onClick(element) {
  document.getElementById("img01").src = element.src;
  document.getElementById("modal01").style.display = "block";
  }

@继承Umbraco.Web.Macros.PartialViewMacroPage
@{
var selection=CurrentPage.Children；
int指数=1；
int count=selection.count（）；
foreach（选择中的var类别）
{
变量项=类别。子项；
@*浏览项目组*@
@foreach（项目中的var项目）
{
@*如果项目有图像缩略图，则显示它*@
@如果（item.ThumbImage.Length>1）
{
}
}
}
@*


*@
}
@*再重复一遍*@
索引++；
@*如果索引等于类别的计数部分*@
如果（索引==计数）
{
}
}  
}
@{
函数onClick（元素）{
document.getElementById（“img01”）.src=element.src；
document.getElementById（“modal01”）.style.display=“block”；
}

}

我觉得这是一个很容易解决的问题，但我就是找不到

---

这是链接到

是否检查了html输出？这是服务器端的问题还是客户端的问题？我解决了这个问题，基本上for循环不能正常工作，所以我把它分解成一堆if语句，并用这种方式修复了它。我知道这是一种很糟糕的做事方式，但是，它现在起作用了。