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

이름에 추가된 목록의 항목 색인을 사용하여 각 사진에 대한 고유 식별자를 만들 수 있습니다. 예:

으아악

이렇게 하면 photo_0, photo_1 등 각 사진에 대한 고유 ID가 생성됩니다.

버튼에는 토글포토() 함수를 호출하고 항목의 인덱스를 매개변수로 전달한 다음 해당 사진을 가져오고 표시 스타일을 차단/없음으로 설정하여 가시성을 전환하는 onclick 속성이 있습니다.

업데이트: 페이지 새로 고침 후에도 지속됨

요청에 따라 페이지를 새로 고칠 때 숨겨진/표시되는 이미지의 지속성을 포함하기 위해 브라우저 저장소를 사용하여 어떤 이미지가 표시되는지 기록하는 기능을 추가했습니다.

으아악

위 예에서 각 사진의 "표시" 스타일 값은 localStorage에서 검색됩니다. 존재하지 않는 경우 기본적으로 "차단됨"(표시)으로 설정됩니다.

togglePhoto() 함수는 버튼을 클릭할 때마다 업데이트된 표시 값을 localStorage에 저장합니다.