잡동사니에도 사랑을

[21.10.13] exam13(02_jQueryEvent) 본문

JAVA_EE/JQuery

[21.10.13] exam13(02_jQueryEvent)

luvforjunk 2021. 10. 14. 09:39
728x90
반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/event.css">
</head>
<body>
<h1>this의 사용</h1>
<div id="input">
   <h2>단독 개체의 확인</h2>
   <div id="singleButton">클릭하세요.</div>
         
   <h2>복수 개체의 확인</h2>
   <div>
      <button class="multiButton">클릭하세요.</button>
      <button class="multiButton">클릭하세요.</button>
      <button class="multiButton">클릭하세요.</button>
      <button class="multiButton">클릭하세요.</button>
   </div>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function(){
	$('#singleButton').click(function(){
		$(this).html('감사합니다.'); // 클릭한 자기 자신을 의미한다. this = '#singleButton'
	});
	
	$('.multiButton').click(function(){
		//$('.multiButton').html('감사합니다.');
		$(this).html('감사합니다.'); // 4개 중에서 클릭한 객체만 영향을 받음
		
		var index = $(this).index();
		var result = index + "번째 요소를 눌렀습니다.";
		$(this).html(result);
	});
});
</script>
</body>
</html>

 

 

[결과]

728x90
반응형

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

[21.10.14] exam02(03_jQueryAttr) - 클릭 시 index 순으로 이미지 파일 변경  (0) 2021.10.14
[21.10.14] exam01(03_jQueryAttr) - attr과 prop의 차이  (0) 2021.10.14
[21.10.13] exam12(02_jQueryEvent)  (0) 2021.10.14
[21.10.13] exam11(02_jQueryEvent)  (0) 2021.10.14
[21.10.13] exam10(02_jQueryEvent)  (0) 2021.10.14
'JAVA_EE/JQuery' Related Articles more