<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>사진들</h1>
<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 type="text/javascript">
$(document).ready(function () {
$("img").click(function () {
let picname = $(this).attr("picname");
alert(picname);
});
});
</script>
</body>
</html>
실행결과
사진을 클릭하면 picname에 들어있는 값이 출력된다.
picname은 정해진 것이 아닌 사용자 지정이다.
처음 문제를 받았을 때
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h2>사진들</h2>
<img alt="이미지없음" src="./image/img01.jpg" id="pic01">
<img alt="이미지없음" src="./image/img02.jpg" id="pic02">
<img alt="이미지없음" src="./image/img03.jpg" id="pic03">
<img alt="이미지없음" src="./image/img04.jpg" id="pic04">
<script type="text/javascript">
$(document).ready(function () {
$("#pic01").click(function () {
alert("성 자비에르 성당 (외관)");
});
$("#pic02").click(function () {
alert("성 자비에르 성당 (내부)");
});
$("#pic03").click(function () {
alert("은행");
});
$("#pic04").click(function () {
alert("가로등");
});
$("img").attr("id", "pid");
});
</script>
</body>
</html>이렇게 복붙을 하며
너무너무 쉽다*^^* 라고... ;
'IT > JSP + JQuery' 카테고리의 다른 글
| [JSP] 지시문 (0) | 2021.06.14 |
|---|---|
| [JSP] 정의, 특징, 구성요소 (2) | 2021.06.14 |
| [JQuery] 이미지 자동 삽입 및 삭제 (0) | 2021.06.10 |
| [JQuery] 속성 값 지정 - 1 ( 이미지 클릭하면 다른 이미지로 변경) (0) | 2021.06.10 |
| [JQuery] 필기 (0) | 2021.06.10 |
