[jQuery] 같은 class의 값을 index()메서드, 배열을 사용하여 event 적용하기 / index()메서드란?

🎈HTML

<div>
    <button type="button" class="multi">button0(0번 클릭됨)</button>
    <button type="button" class="multi">button1(0번 클릭됨)</button>
    <button type="button" class="multi">button2(0번 클릭됨)</button>
</div>

---

🎈 index()

• 특정 객체에 대하여 index() 함수의 리턴값을 사용하면 자신이 속한
  부모 택그 안에서 태그 종류의 구분 없이 자신이 몇 번째 요소인지를
  알 수 있다.
• index() 함수는 요소를 0부터 카운트한다.

---

🎈 class가 "multi" 인 버튼 요소 3개에 각각 이벤트 적용

<script>
 		let multiArr = [0,0,0]
        $('.multi').on('click', function(){
            let multiIdx = $(this).index();
            let multiCount = ++multiArr[multiIdx];
            $(this).text("버튼이 "+ multiCount+ "번 눌렸습니다.");
        });
</script>

1. multiArr 배열을 생성하여 3개의 버튼의 각각의 Count 초기값을 설정
2. 특정 버튼을 클릭하는 이벤트 발생 시, $(this).index()로 이벤트가 발생한 버튼 요소의 인덱스를 multiIdx 변수에 저장
3. multiArr배열의 인덱스인 multiIdx 변수를 사용하여
   multiArr[multiIdx] 의 값을 버튼이 눌릴 때마다 0에서 +1이 되도록
   해준다.

---

🎈 class가 "multi" 인 버튼 요소 3개에 각각 이벤트 적용 - 객체배열

• 위와 같은 방식이지만, 배열을 객체 배열로 생성하여 이벤트를 적용!

<script>
 		 let multiArr = {multi:[0,0,0]} 
        $('.multi').on('click', function(){
            let multiIdx = $(this).index();
            let multiCount = ++multiArr.multi[multiIdx];
            $(this).text("버튼이 "+ multiCount+ "번 눌렸습니다.");
        });
</script>