Sembunyikan/nyahsembunyikan setiap foto secara berasingan dalam setiap pernyataan

Question

Kemas kini: Ia berkesan untuk saya menggunakan penyelesaian @Exildur, tetapi apabila saya memuat semula halaman, foto tersembunyi kelihatan semula :S.

Saya mempunyai senarai projek dan setiap projek mempunyai gambarnya sendiri. Saya perlu menambah butang sembunyi/tunjukkan foto untuk setiap foto. Masalahnya ialah apabila saya menggunakan fungsi js dengan id ia hanya menyembunyikan/menunjukkan foto pertama kerana Id mestilah unik. Ini kodnya:

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

Anda boleh mencipta pengecam unik untuk setiap foto menggunakan indeks item dalam senarai yang dilampirkan pada nama. Contohnya:

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

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

sssccc

Ini akan membuat ID unik untuk setiap foto, seperti photo_0, photo_1, dll.

Butang mempunyai atribut onclick yang memanggil fungsi togglePhoto() dan melepasi indeks item sebagai parameter, kemudian mendapatkan foto yang sepadan dan togol keterlihatannya dengan menetapkan gaya paparan kepada menyekat/tiada.

Kemas kini: Kegigihan selepas penyegaran halaman

Seperti yang diminta, untuk menyertakan kegigihan imej tersembunyi/kelihatan merentas penyegaran halaman, saya telah menambahkan keupayaan untuk menggunakan storan penyemak imbas untuk merakam imej yang boleh dilihat atau tidak:

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

Dalam contoh di atas, nilai gaya "paparan" untuk setiap foto akan diambil daripada localStorage. Jika tidak hadir, ia akan lalai kepada "disekat" (kelihatan).

Fungsi togglePhoto() menyimpan nilai paparan yang dikemas kini dalam localStorage apabila butang diklik.