[jQuery] 속성 값에 사진의 제목을 설정하고 이미지를 클릭하면 속성 값을 취득하여 출력하기 / 사용자 지정 태그 사용예시

속성 값에 사진의 제목을 설정하고 이미지를 클릭하면 속성 값을 취득하여 출력하기

<img alt="성 자비에르 성당(외부) 사진입니다."  src="./image/img01.jpg">
<img alt="성 자비에르 성당(내부) 사진입니다."  src="./image/img02.jpg">
<img alt="낡은건물 사진입니다."  src="./image/img03.jpg">
<img alt="가로등 사진입니다."  src="./image/img04.jpg">
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script> 
<script type="text/javascript">
$(document).ready(function() {
	$("img").click(function() {
		let picname = $(this).attr("alt");
		alert(picname);
	});
});
</script>

 

설명

alt의 값에 사진의 제목을 넣고, 클릭할 때 경고창에 alt값이 출력되도록 하였다.

하지만, alt의 사용은 이미지가 없을 경우 나오는 문구이기 때문에 좋지 못한 예제이다.

---

사용자 지정 태그 사용예시

<img alt="" src="image/img01.jpg" picname="성 자비에르 성당 (외관)">
<img alt="" src="image/img02.jpg" picname="성 자비에르 성당 (내관)">
<img alt="" src="image/img03.jpg" picname="은행">
<img alt="" src="image/img04.jpg" picname="가로등">
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script> 
<script type="text/javascript">
$(document).ready(function () {
   $("img").click(function () {
      let picname = $(this).attr("picname");
      alert(picname);
   });
});
</script>

 

설명

'picname'라는 태그를 지정하여 값에 사진의 제목을 넣었다.

위 예제와 비교했을 때 jquery구문에서 변경된 건 attr("picname")이다.