在 foreach 语句中分别隐藏/取消隐藏每张照片

Question

更新：它与我一起使用@Exildur解决方案，但当我刷新页面时，隐藏的照片再次可见：S。

我有一个项目列表，每个项目都有自己的照片。我需要为每张照片添加一个隐藏/显示照片按钮。问题是当我使用带有 id 的 js 函数时，它只隐藏/显示第一张照片，因为 Id 必须是唯一的。 这是代码：

foreach (var item in Model.AttachmentsList)
{
   <div style=" display: inline-block;  width: 400px; margin:10px;">
                    
      @Html.Raw("<a href='../../" + item.FileUrl + "' alt='img'> <img  src='../../" + item.FileUrl + "'  > </a>")
                   
    </div>

    <button id="btn_photo">Hide/Show Photo</button>
               

 }

Answer 1

您可以使用列表中附加到名称的项目索引来为每张照片创建唯一标识符。例如：

foreach (var item in Model.AttachmentsList)
{
    var index = Model.AttachmentsList.IndexOf(item);
    

        @Html.Raw("  ")
    
    Hide/Show Photo
}

sssccc

这将为每张照片创建一个唯一的 ID，例如照片_0、照片_1 等

该按钮有一个 onclick 属性，该属性调用togglePhoto() 函数并将项目的索引作为参数传递，然后获取相应的照片并通过将显示样式设置为阻止/无来切换其可见性。

更新：页面刷新后持久化

根据要求，为了包括跨页面刷新的隐藏/可见图像的持久性，我添加了使用浏览器存储来记录哪些图像可见或不可见的功能：

foreach (var item in Model.AttachmentsList)
{
    var index = Model.AttachmentsList.IndexOf(item);
    var display = localStorage.getItem('photo_' + index + '_display') || 'block';
    

        @Html.Raw("  ")
    
    Hide/Show Photo
}

sssccc

在上面的示例中，将从 localStorage 中检索每张照片的“显示”样式值。如果不存在，它将默认为“阻止”（可见）。

每当单击按钮时，togglePhoto() 函数都会将更新的显示值存储在 localStorage 中。