[제이쿼리]- 이벤트가 발생한 요소 추적 / this를 이용해서 내가 클릭한 a 애들만 css 적용 / 내가 클릭한 요소가 this

사이트 방문자가 이벤트를 발생시킨 요소의 정보를 구해올 때 this를 이용할 수 있다. 

또한 이벤트가 발생한 요소의 index값을 구해오는 방법도 구해올 수 있다. 

 

 

여기서 this는  = 이벤트가 발생한 요소

---

$(this) 선택자

 

이벤트 핸들러에서 $(this)를 사용하면 이벤트가 발생한 요소를 추적할 수 있다. 

 $(this) 안에는 이벤트가 발생한 요소, 즉 해당 태그가 반환된다. 

내가 클릭한 요소를 선택할 때 this를 사용할 수 있다.

 

---

index( )메서드

 

이벤트를 등록한 요소 중 이벤트가 발생한 요소의 인덱스 값을 반환한다. 

 

[기본형]
* 예시는 그룹이벤트이지만 단독 이벤트에서도 사용 가능


$('이벤트 대상').on("이벤트명", function(){
    $('이벤트 대상').index(this)
})

---

this 예제 )  

a태그 중에서 내가 클릭한 요소만 css 요소 적용하기 

 <h2>$(this)</h2>

    <ul class="menu_wrap_1">

      <li><a href="#">메뉴1</a></li>

      <li><a href="#">메뉴2</a></li>

      <li><a href="#">메뉴3</a></li>

    </ul>

 $(".menu_wrap_1 a").on("click", function (e) {

          e.preventDefault(); //기본이벤트 차단

          // 모든 a태그의 배경 색상을 흰색으로 지정

          $(".menu_wrap_1 a").css({

            backgroundColor: "#fff",

          });

          //this : 사용자가 클릭한 a태그를 선택

          $(this).css({

            backgroundColor: "gold",

          });

        });

 

모든 a태그의 배경을 먼저 흰색으로 만들어놓은 다음에

내가 클릭한 요소만 해당 gold 색상을 적용

---

index 예제 ) 

    <h2>index()</h2>

    <ul class="menu_wrap_2">

      <li><a href="#">메뉴1</a></li>

      <li><a href="#">메뉴2</a></li>

      <li><a href="#">메뉴3</a></li>

    </ul>

 

   <p class="idxNum"></p>

 

아래에 내가 클릭한 요소의 인덱스 번호값이 반환된다.

 

  $(".menu_wrap_2 a").on("click", function (e) {

          e.preventDefault(); //기본이벤트 차단

          // 모든 a태그의 배경 색상을 흰색으로 지정

          $(".menu_wrap_2 a").css({

            backgroundColor: "#fff",

          });

          //menu_wrap_2  a태그 중 클릭한 요소(this)의 index값을 idx에 할당

          let idx = $(".menu_wrap_2 a").index(this);

          $(".menu_wrap_2 a").eq(idx).css({

            backgroundColor: "green",

          });

          // P태그인 idxNum에 내가 클릭한 인덱스 번호를 출력해주기

          $(".idxNum").text(idx);

        });