JS) querySelectorAll의 index를 가져와 event를 발생하기

  const showinfo = document.querySelectorAll(".showinfo");
  const hidden = document.querySelectorAll(".hidden");
  

  for(var i=0; i<showinfo.length; i++){
    let hiddenNum = i;
    showinfo[i].addEventListener("click", e => {
      e.preventDefault();
      for(var j=0; j<hidden.length; j++){
        hidden[j].classList.add("hidden");
      }
      hidden[hiddenNum].classList.remove("hidden");
    });
  }

위 같은 상황일 때 화살표를 누르면 해당 내용에 맞게 강의정보를 출력하는 방법이다.
전제조건은 index 번호가 서로 일치해야한다 그렇기 때문에 class명을 잘 선언해주어야 한다.

처음에는 for문을 돌려 이벤트리스너를 작동시키고 만들어둔 function을 동작할려고 했지만, 정작 어떤 querySelector의 hidden을 없애야하는가라는 문제에 봉착했다.

해결방법은 익명함수를 사용했다. for문 안에 생성되는 익명함수를 사용하게 되면 인덱스 값을 유지할 수 있지 않을까 라는 생각에 도전.... 결과는 실패 왜냐하면 i라는 값을 바로 사용하게 되면 이상하게 마지막 숫자가 도출되었다. 그래서 let으로 변수를 선언하고 값을 넣어줘서 받아오니 정상적으로 작동 되었다.