이미지 클릭 후 해당하는 설명 열기

관련된 자료를 찾아보다 두 가지 글을 발견해서 모두 접목시켜보기로 했습니다.

첫 번째 글에선 해당 이미지에 라벨링해서 설명을 불러오는 방법입니다.

아래는 클래스 파일에 라벨링 한 부분입니다.

<ul class="member4"> 
 	<img id="image4" class="memberimage" onclick="getText(event)">
 		<li class="list-group-item">팀원</li>
        <li class="list-group-item">xxx</li>
        <label for="image4">경씨</label> //라벨링
</ul>

아래는 Javascript 구문으로 따로 파일을 만든 후 불러왔습니다.

function getText(event)  {
  const imageId = event.target.id;
  const query = 'label[for="'+ imageId + '"]'
  const text = 
        document.querySelector(query).innerText;

  document.getElementById('result').innerText = text;
}

하지만 해당 라벨링은 이미지가 늘어날 수록 각 이미지에 대해 라벨링을 추가해야 하고 라벨링한 사이에만 설명을 추가할 수 있다는 단점이 있었습니다.

그래서 두 번째 방법을 시도해봤다. 해당 방법은 설명을 모두 작성한 후에 class에 hidden을 추가하여 안보이게 한 후 이미지를 클릭한 id에 대해서만 불러오게 해봤습니다.

<div id = "image4content" class = "hidden arrange">
	<h2>경씨</h2>
	<p>자기소개</p>
</div>

위의 div 안에 내용을 작성하여 CSS 부분에서 다음과 같이 숨겼습니다.

    .hidden {
        display: none;
    }

이후 클릭한 이미지에 대해 ID를 불러와서 hidden 클래스를 지워 화면에 나타나게 했습니다.

function showImageContent(imageId) {
  var contentId = imageId + 'content';
  $('.memberimage').each(function() {
      var contentId = $(this).attr('id') + 'content';
      $('#' + contentId).addClass('hidden');
  });
  $('#' + contentId).removeClass('hidden');
}

이 방법도 결국 설명이 많으면 코드가 길어진다는 점이 있지만 위의 라벨링과 다르게 각각에 대해 라벨링을 안해도 된다는 점때문에 두 번째 방법으로 코딩했습니다.

 

다른 방법이 더 있는지 찾아봐야 겠습니다.