html 속성 제어

1. 이벤트 처리 함수 안에서 자기 자신을 판별하기

• 이벤트에 의해서 실행되는 함수 영역 안에서는 특수 키워드 this를 사용할 수 있음
• 이 키워드를 $(this) 함수에 전달하면, 이벤트가 발생한 자기 자신을 감지할 수 있음

2. 나는 몇번 요소인가?

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
    <div>
        <button type="button" id="single">클릭하세요</button>
    </div>
    <hr>
    <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>
    <script>
        let single = 0;
        let multi = [0, 0, 0];
        $("#single").click(function(){
            single++;
            $(this).html(single + "번 클릭하셨습니다.");
        });
        $(".multi").click(function(){
            let idx = $(this).index();
            // console.log(idx);
            multi[idx]++;
            $(this).html("button " + idx + "(" + multi[idx] + "번 클릭됨)");
        }); 
    </script>
</body>
</html>