[jQuery] 이벤트 사용시 $(this)의미와 활용
- 포로그래밍/jQuery
- 2020. 12. 8.
안녕하세요? 원주남자입니다.
$(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>
'포로그래밍 > jQuery' 카테고리의 다른 글
| [javascript]타이머(timer)함수의 의미와 활용 (0) | 2020.12.11 |
|---|---|
| [jQuery] JSON데이터를 활용한 table만들기 (0) | 2020.12.10 |
| [Jquery] Each()함수를 사용한 li값 가져오기 (0) | 2020.12.03 |
| [Javascript] 배열(Array)선언, 추가, 삭제, 관리방법 (0) | 2020.11.29 |
| [jQuery]CSS, 스타일 적용하기(width, height, display등등) (0) | 2019.07.10 |