jQuery $(this)

html에서 하나의 클래스를 가진 여러개의 태그들 중 하나를 클릭했을 때 클릭이벤트가 실행되는 코드를 짜고있었을 때, 해당하는 클래스의 모든 태그들이 이벤트가 실행되어 곤란했던 적이 있었습니다. 어쩔수없이 id를 설정하여 어찌저찌 메꾸고 넘어갔었던 기억이 있었습니다.

이게 일이 빈번해지고 코드도 보기 안 좋아지기 시작하면서 방법을 찾다 jQuery의 this를 알게되고나서 어떻게 해결할지에 대해 알게되었습니다.

그래서 이번 포스팅에서는 jQuery의 this, $(this)에 대해 알아보려 합니다.

먼저 코드를 보면서 시작하겠습니다.

<style>
    .number {
        clear: both;
        float: left;
        background-color: gray;
        margin: 5px;
        font-size: 1.5em;
        cursor: pointer;
    }
</style>
<body>
    <div class="number">1번입니다.</div>
    <div class="number">2번입니다.</div>
    <div class="number">3번입니다.</div>
</body>
<script>
    $(".number").on("click", function(){
        $(".number").css("background-color", "red").text("clicked.");
    });
</script>

body태그에는 class가 number인 세 개의 태그가 있습니다. 그리고 클래스가 number인 태그를 클릭했을 때 배경색과 텍스트가 바뀌게 설정했습니다.

그렇다면 '2번입니다.'를 클릭했을 때 '2번입니다.'만 css가 적용이 되어야합니다. 먼저 클릭하기 전 화면을 보겠습니다.

처음 로딩 된 화면입니다. 여기서 '2번입니다.'를 클릭하게 되면,

위처럼 모든 태그가 변하게 됩니다. 이유는 하나를 클릭했어도 class가 number인 태그에 css를 변경하도록 설정했기 때문입니다. 그렇다면 어떻게 해야 클릭했을 때 해당하는 태그만 css를 변경시킬 수 있을까요?

<script>
    $(".number").on("click", function(){
        $(this).css("background-color", "red").text("clicked.");
    });
</script>

중간에 $(".number")에서 $(this)로 변경된 모습을 확인할 수 있습니다. jQuery의 $(this)를 이용하면 클릭한 클래스의 해당 태그만 css가 변경됩니다.

처음의 화면에서 '2번입니다.'를 클릭하면,

해당 태그를 클릭 한 부분만 css가 변경됩니다.

참고자료

www.everdevel.com/jQuery/this/

'코딩 > jQuery' 카테고리의 다른 글

jQuery click(), on('click') 차이 (0)	2020.07.03
jQuery change()를 통한 체크박스 체크, 체크해제시 이벤트 발생 (0)	2020.07.02
jQuery fadeIn, fadeOut, fadeToggle (0)	2020.07.01
jQuery setInterval, clearInterval (0)	2020.06.30
JavaScript 실행순서 (0)	2020.06.30