잡동사니에도 사랑을

[21.10.14] exam02(03_jQueryAttr) - 클릭 시 index 순으로 이미지 파일 변경 본문

JAVA_EE/JQuery

[21.10.14] exam02(03_jQueryAttr) - 클릭 시 index 순으로 이미지 파일 변경

luvforjunk 2021. 10. 14. 10:37
728x90
반응형

클릭할 때마다 index순으로 이미지 파일을 변경해주려고 한다

기능 구현을 위해 다음과 같은 4개의 이미지 파일이 필요하다.

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/event.css">
</head>
<body>
	<h1>속성 제어</h1>
	<p>클릭하세요.</p>
	<img src="../img/img1.PNG" width="450" height="100" alt="카카오 프렌즈">

	<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script type="text/javascript">
		$(function() {
			var index = 1;
			$('img').click(function() {
				index = (index % 4) + 1; // 1~4 순서대로 나온다
				$('img')
				$(this).attr('src', '../img/img' + index + '.PNG')
			});
		});
	</script>
</body>
</html>

 

 

[결과]

결과1

 

결과2

 

결과3

 

결과4

 

728x90
반응형

'JAVA_EE > JQuery' 카테고리의 다른 글

[21.10.14] exam04(03_jQueryAttr) - 체크박스 활성화 / 비활성화, 파일 열기  (0) 2021.10.14
[21.10.14] exam03(03_jQueryAttr) - 전체 선택 기능 구현(attr / prop)  (0) 2021.10.14
[21.10.14] exam01(03_jQueryAttr) - attr과 prop의 차이  (0) 2021.10.14
[21.10.13] exam13(02_jQueryEvent)  (0) 2021.10.14
[21.10.13] exam12(02_jQueryEvent)  (0) 2021.10.14
'JAVA_EE/JQuery' Related Articles more