在 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 中。