본문 바로가기
개발 공부/JS, JQuery

JQuery(제이쿼리) 이벤트 사용시 $(this)의미와 활용

by momo'sdad 2023. 11. 25.

JQuery(제이쿼리) 이벤트 사용시 $(this)의미와 활용

 

$(this)는 일종의 변수, 선택자라고 볼 수 있다.

 

일반적으로 동일한 소스가 반복되는 네비게이션 메뉴, 탭, 아코디언메뉴, 리스트등에서 많이 활용.

 

활용 예)

<!doctype html>
<html lang="ko">
 <head>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <meta http-equiv="Content-Type" content="text/html";charset="utf-8"/>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>

  </style>
  
 </head>
 <body>

  <input class="btn" type="button" value="버튼1"/>
  <input class="btn" type="button" value="버튼2"/>
  <input class="btn" type="button" value="버튼3"/>  

  <script>

  var button = $(".btn");
	button.click(function(){
		button.val("눌렀어~");
	});
  
  </script>

 </body>
</html>

btn이라는 class를 동일하게 가진 버튼들이 존재할때

 

현재는 어느버튼을 눌러도 class가 같기 때문에

 

 

 모든 버튼에 글씨가 변하는 것을 볼 수 있다.

이 this를 활용하여 타겟버튼만 변경되게 바꿔보면

button.click(function(){
	$(this).val("눌렀어~");
});

 

이 부분만 바꾸면

만약 이 방법을 안쓴다면 아래 예제소스와 같이 각 버튼마다 id를 별도로 줘야한다.

각각의 이벤트를 만들어주는 번거롭고 비효율적인 일을 할수도 있다.

그러니 이 $(this)의 활용은 효율적으로 코드를 줄이는데 쓸 수 있다

 

<input class="btn1" type="button" value="버튼1"/>
<input class="btn2" type="button" value="버튼2"/>
<input class="btn3" type="button" value="버튼3"/>  

  <script>

    var button1 = $(".btn1");
	button1.click(function(){
		button1.val("눌렀어~");
	});

	var button2 = $(".btn2");
	button2.click(function(){
		button2.val("눌렀어~");
	});

	var button3 = $(".btn3");
	button3.click(function(){
		button3.val("눌렀어~");
	});
  
  </script>
반응형