Blenden Sie jedes Foto einzeln in jeder Aussage ein/aus

Question

Update: Bei mir hat es mit der @Exildur-Lösung funktioniert, aber wenn ich die Seite aktualisiere, sind die versteckten Fotos wieder sichtbar :S.

Ich habe eine Liste mit Projekten und jedes Projekt hat ein eigenes Foto. Ich muss für jedes Foto eine Schaltfläche zum Ausblenden/Anzeigen von Fotos hinzufügen. Das Problem ist, wenn ich die js-Funktion mit der ID verwende, wird nur das erste Foto ausgeblendet/angezeigt, da die ID eindeutig sein muss. Hier ist der Code:

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
}

这将为每张照片创建一个唯一的 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
}

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

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