Hide/Unhide each photo separately in foreach statement-CodePudding

Update: It worked with me with @Exildur solutions but when I refresh the page, the hidden photos become visible again :S .

I have a list of items, each item has its own photo. I need to add a hide/show photo button to each photo. the problem is when I use js function with id, it only hide/show the first photo because Id must be unique. here is the 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>
               

 }

CodePudding user response：

You can use the index of the item in the list appended to the name to create a unique identifier for each photo. For example:

foreach (var item in Model.AttachmentsList)
{
    var index = Model.AttachmentsList.IndexOf(item);
    <div style="display: inline-block; width: 400px; margin:10px;">
        @Html.Raw("<a href='../../"   item.FileUrl   "' alt='img'> <img id='photo_"   index   "' src='../../"   item.FileUrl   "'> </a>")
    </div>
    <button onclick="togglePhoto(@index)">Hide/Show Photo</button>
}

<script>
function togglePhoto(index) {
    var photo = document.getElementById('photo_'   index);
    if (photo.style.display === 'none') {
        photo.style.display = 'block';
    } else {
        photo.style.display = 'none';
    }
}
</script>

This will create a unique ID for each photo, e.g. photo_0, photo_1, etc.

The button has an onclick attribute that calls the togglePhoto() function and passes the index of the item as an argument, which then gets the corresponding photo and toggles its visibility by setting the display style to block/none.

Update: Persistence after page refresh

As requested, to include persistence of hidden/visible images across page refreshes, I've added functionality to use browser storage to note which images are visible or not:

foreach (var item in Model.AttachmentsList)
{
    var index = Model.AttachmentsList.IndexOf(item);
    var display = localStorage.getItem('photo_'   index   '_display') || 'block';
    <div style="display: inline-block; width: 400px; margin:10px;">
        @Html.Raw("<a href='../../"   item.FileUrl   "' alt='img'> <img id='photo_"   index   "' src='../../"   item.FileUrl   "' style='display: "   display   ";'> </a>")
    </div>
    <button onclick="togglePhoto(@index)">Hide/Show Photo</button>
}

<script>
function togglePhoto(index) {
    var photo = document.getElementById('photo_'   index);
    if (photo.style.display === 'none') {
        photo.style.display = 'block';
        localStorage.setItem('photo_'   index   '_display', 'block');
    } else {
        photo.style.display = 'none';
        localStorage.setItem('photo_'   index   '_display', 'none');
    }
}
</script>

In the above example, the 'display' style value for each photo will be retrieved from localStorage. If not present, it will default to 'block' (visible).

The togglePhoto() function will then store the updated display value in localStorage whenever the button is clicked.

CodePudding user response：

This will create a unique ID for each photo, e.g. photo_0, photo_1, etc.