Masquer/afficher chaque photo individuellement dans la déclaration foreach

Question

Mise à jour : Cela a fonctionné pour moi en utilisant la solution @Exildur, mais lorsque j'actualise la page, les photos cachées sont à nouveau visibles :S.

J'ai une liste de projets et chaque projet a sa propre photo. Je dois ajouter un bouton masquer/afficher la photo pour chaque photo. Le problème est que lorsque j'utilise la fonction js avec l'identifiant, elle masque/affiche uniquement la première photo car l'identifiant doit être unique. Voici le 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

Vous pouvez créer un identifiant unique pour chaque photo à l'aide de l'index des éléments dans la liste annexée au nom. Par exemple :

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

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

sssccc

Cela créera un identifiant unique pour chaque photo, tel que photo_0, photo_1, etc.

Le bouton a un attribut onclick qui appelle la fonction togglePhoto() et passe l'index de l'élément en tant que paramètre, puis obtient la photo correspondante et bascule sa visibilité en définissant le style d'affichage sur bloquer/aucun.

Mise à jour : persistance après l'actualisation de la page

Comme demandé, pour inclure la persistance des images masquées/visibles lors des actualisations de page, j'ai ajouté la possibilité d'utiliser le stockage du navigateur pour enregistrer quelles images sont visibles ou non :

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

Dans l'exemple ci-dessus, la valeur du style "affichage" de chaque photo sera récupérée depuis localStorage. S'il n'est pas présent, il sera par défaut "bloqué" (visible).

La fonction togglePhoto() stocke la valeur d'affichage mise à jour dans localStorage chaque fois que vous cliquez sur le bouton.