devil cat everdevel character

현재 작업 중..

disney Teyon kin

편리한 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

.view{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}

jQuery

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

결과

저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.

저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.

저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.

저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.

저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.

저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.

저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.

저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.

저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.

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

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

<!doctype html>
<html>
<head>
<title>
웹 에디터에서 제이쿼리 예제가 구동이 안될시에는 파이어폭스(권장) 또는 인터넷 익스플로러를 이용해주세요.
</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.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>
다음강좌는 16강.태그 찾기 입니다. 클릭하면 다음 강좌로 이동합니다.