개발일지/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로 바꾸어주면 된다.