개발일지/JavaScript + jquery

[jquery] clickTest 줄여서 쓰기 $(this)

연습용365 2021. 9. 13. 17:42 
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../jquery-3.6.0.min.js"></script>
  <style>
	.clickTest{ background: pink;
				padding:20px;
				margin: 0 0 5px;
	}
  </style>
  <script>
	$(function(){
			var elements = $('.clickTest');
			elements.click(function(){elements.text('클릭되었습니다.');});
		});
  </script>
 </head>
 <body>
	<div class="clickTest">div1</div>
	<div class="clickTest">div1</div>
	<div class="clickTest">div1</div>
	<div class="clickTest">div1</div>
	<div class="clickTest">div1</div>
 </body>
</html>

 

 

	$(function(){
			var elements = $('.clickTest');
			elements.click(function(){elements.text('클릭되었습니다.');});
		});

 

이런 모양이 있다.
클릭을 하면?

한 번에 모든 게 바뀐다.
하나를 클릭하면 하나만 바뀌도록 하려면?

<body>
	<div class="clickTest" id="div1">div1</div>
	<div class="clickTest" id="div2">div2</div>
	<div class="clickTest" id="div3">div3</div>
	<div class="clickTest" id="div4">div4</div>
	<div class="clickTest" id="div5">div5</div>
 </body>

일단은 바디부터 바꿔준다. 각 div에 id 설정을 해주었다.

$(function(){
			var div1 = $('#div1');
			div1.click(function(){div1.text('클릭했어요');});
		});

제이쿼리에 가서 div1 변수 설정 및 명령어 입력을 해준다. 아직은 하나만 바뀜.

$(function(){
			var div1 = $('#div1');
			div1.click(function(){div1.text('div1 클릭했어요');});
			var div2 = $('#div2');
			div2.click(function(){div2.text('div2 클릭했어요');});
			var div3 = $('#div3');
			div3.click(function(){div3.text('div3 클릭했어요');});
			var div4 = $('#div4');
			div4.click(function(){div4.text('div4 클릭했어요');});
			var div5 = $('#div5');
			div5.click(function(){div5.text('div5 클릭했어요');});
		});

하나씩 변수 설정을 해줘서 한땀 한땀 바꿔주는 방법이 있다. 그러나 너무 길다. 더 줄일 수 있는 방법은 없을까?

$(function(){
			var div1 = $('#div1');
			$('.clickTest').click(function(){$(this).text('클릭했어요');});
		});

다섯문장을 this로 한 번에 줄여서 쓸 수 있다. 다만 모두 같은 글씨가 나타난다.

 

또는

 

id를 class로 바꾸어주면 된다.