편리한 this()

오늘은 this()에 대해서 공부해 봅시다.

다음과 같은 상황이 있다.

상황1

HTML

<div class="click">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="click">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="click">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="click">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="click">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="click">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="click">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="click">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="click">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>

CSS

.click{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer}

예제

위와 같은 상황이 있다.

$('.click').click(function(){
  $('.click').text('저만 클릭 하셨군요 ㅡㅡ^');
});

위의 소스를 활용 한다면 다음과 같은 결과를 초래하게 된다.
아래를 아무거나 하나 눌러보도록 하자

엇!! 다 바껴 버린다. 자신만 바뀌게 해달라고 요청하고 있는데 ㅜㅜ.

도대체 이 상황을 어찌할 것인가? 아하 방법이 ^^있다. 바로

각각의 클래스를 다른 이름으로 부여하는 것이다.

HTML

<div class="click1">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="click2">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="click3">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="click4">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="click5">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="click6">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="click7">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="click8">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="click9">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>

클래스 이름 뒤에 숫자를 붙였다.

그럼 제이쿼리 소스도 아래와 같이..

jQuery

$('.click1').click(function(){
  $('.click1').text('저만 클릭 하셨군요 ^-^');
});

$('.click2').click(function(){
  $('.click2').text('저만 클릭 하셨군요 ^-^');
});

$('.click3').click(function(){
  $('.click3').text('저만 클릭 하셨군요 ^-^');
});

$('.click4').click(function(){
  $('.click4').text('저만 클릭 하셨군요 ^-^');
});

$('.click5').click(function(){
  $('.click5').text('저만 클릭 하셨군요 ^-^');
});

$('.click6').click(function(){
  $('.click6').text('저만 클릭 하셨군요 ^-^');
});

$('.click7').click(function(){
  $('.click7').text('저만 클릭 하셨군요 ^-^');
});

$('.click8').click(function(){
  $('.click8').text('저만 클릭 하셨군요 ^-^');
});

$('.click9').click(function(){
  $('.click9').text('저만 클릭 하셨군요 ^-^');
});

CSS

설계를 잘못했으니 css도 멍청하게 이렇게 9개 써준다.

.click1{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click2{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click3{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click4{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click5{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click6{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click7{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click8{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click9{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}

결과

위 결과를 보자.. 성공했다. 누른것만 바뀌게 된다. ^^

this를 모르면 이 기능을 구현하기 위해 다음과 같은 엄청난 양의 소스를 입력해야만 한다.

<div class="click1">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="click2">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="click3">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="click4">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="click5">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="click6">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="click7">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="click8">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="click9">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>

$('.click1').click(function(){
  $('.click1').text('저만 클릭 하셨군요 ^-^');
});

$('.click2').click(function(){
  $('.click2').text('저만 클릭 하셨군요 ^-^');
});

$('.click3').click(function(){
  $('.click3').text('저만 클릭 하셨군요 ^-^');
});

$('.click4').click(function(){
  $('.click4').text('저만 클릭 하셨군요 ^-^');
});

$('.click5').click(function(){
  $('.click5').text('저만 클릭 하셨군요 ^-^');
});

$('.click6').click(function(){
  $('.click6').text('저만 클릭 하셨군요 ^-^');
});

$('.click7').click(function(){
  $('.click7').text('저만 클릭 하셨군요 ^-^');
});

$('.click8').click(function(){
  $('.click8').text('저만 클릭 하셨군요 ^-^');
});

$('.click9').click(function(){
  $('.click9').text('저만 클릭 하셨군요 ^-^');
});
.click1{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click2{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click3{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click4{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click5{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click6{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click7{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click8{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click9{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}

하지만 this()를 사용하면 이렇게 소스가 바뀌게 된다.

$('.view').click(function(){
  $(this).text('저만 클릭 하셨군요 ^ㅡ^');
});

위의 테스트 소스들과 혼동이 없게 하기 위하여 클래스 이름 view 로 변경하여 다시 해보겠습니다.

HTML

<div class="view">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="view">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="view">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="view">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="view">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="view">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="view">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="view">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="view">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>

CSS

jQuery

$('.view').click(function(){
  $(this).text('저만 클릭 하셨군요 ^ㅡ^');
});

결과

이벤트를 발생시킨 자기 자신을 선택시에 같은 클래스를 갖더라도 자기 자신만 선택을 하여 처리해준다.

타이핑 해가며 익혀보세요.^^

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>pinkcoding :: 제이쿼리 강좌</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
  $('.view').click(function(){
    $(this).text('저만 클릭 하셨군요 ^ㅡ^');
  });
});
</script>
<style>
.view{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
</style>
</head>
<body>
<div class="view">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="view">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="view">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="view">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="view">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="view">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="view">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="view">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="view">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
</body>
</html>

결과는 바로 아래에서 확인할 수 있습니다.