자바스크립트 메뉴 만들때 코드 단축화 질문드립니다.

Question

// Top Menu const gnbList &#61; document.getElementsByClassName(&#34;gnb-list&#34;); const subNav &#61; document.getElementsByClassName(&#34;sub-nav&#34;); gnbList[0].addEventListener( &#34;mouseover&#34;, () &#61;> ( (gnbList[0].style.backgroundColor &#61; &#34;red&#34;), (subNav[0].style.backgroundColor &#61; &#34;red&#34;) ) ); gnbList[0].addEventListener( &#34;mouseout&#34;, () &#61;> ( (gnbList[0].style.backgroundColor &#61; &#34;#fff&#34;), (subNav[0].style.backgroundColor &#61; &#34;#fff&#34;) ) ); gnbList[1].addEventListener( &#34;mouseover&#34;, () &#61;> ( (gnbList[1].style.backgroundColor &#61; &#34;red&#34;), (subNav[1].style.backgroundColor &#61; &#34;red&#34;) ) ); gnbList[1].addEventListener( &#34;mouseout&#34;, () &#61;> ( (gnbList[1].style.backgroundColor &#61; &#34;#fff&#34;), (subNav[1].style.backgroundColor &#61; &#34;#fff&#34;) ) ); gnbList[2].addEventListener( &#34;mouseover&#34;, () &#61;> ( (gnbList[2].style.backgroundColor &#61; &#34;red&#34;), (subNav[2].style.backgroundColor &#61; &#34;red&#34;) ) ); gnbList[2].addEventListener( &#34;mouseout&#34;, () &#61;> ( (gnbList[2].style.backgroundColor &#61; &#34;#fff&#34;), (subNav[2].style.backgroundColor &#61; &#34;#fff&#34;) ) ); gnbList[3].addEventListener( &#34;mouseover&#34;, () &#61;> ( (gnbList[3].style.backgroundColor &#61; &#34;red&#34;), (subNav[3].style.backgroundColor &#61; &#34;red&#34;) ) ); gnbList[3].addEventListener( &#34;mouseout&#34;, () &#61;> ( (gnbList[3].style.backgroundColor &#61; &#34;#fff&#34;), (subNav[3].style.backgroundColor &#61; &#34;#fff&#34;) ) );이 값이 너무 길어서 for문으로 줄여보았는데 동일한 결과가 나오지않습니다. 도대체 뭐가 잘못된지 모르겠어요..// Top Menuconst gnbList &#61; document.getElementsByClassName(&#34;gnb-list&#34;);const subNav &#61; document.getElementsByClassName(&#34;sub-nav&#34;); for (i &#61; 0; i <4; i&#43;&#43;) { gnbList[i].addEventListener( &#34;mouseover&#34;, () &#61;> ( (gnbList[i].style.backgroundColor &#61; &#34;red&#34;), (subNav[i].style.backgroundColor &#61; &#34;red&#34;) ) ); gnbList[i].addEventListener( &#34;mouseout&#34;, () &#61;> ( (gnbList[i].style.backgroundColor &#61; &#34;#fff&#34;), (subNav[i].style.backgroundColor &#61; &#34;#fff&#34;) ) );}

캐티 · Answer

함수 안에서 이벤트 등록을 해줘야 하빈다. var 대신 let 이 궨히 나온 것은 아닌쩌염. // Top Menu const gnbList &#61; document.getElementsByClassName(&#34;gnb-list&#34;); const subNav &#61; document.getElementsByClassName(&#34;sub-nav&#34;); for (var i &#61; 0; i <4; i&#43;&#43;) test(i); function test(i){ gnbList[i].addEventListener( &#34;mouseover&#34;, () &#61;> ( (gnbList[i].style.backgroundColor &#61; &#34;red&#34;), (subNav[i].style.backgroundColor &#61; &#34;red&#34;) ) ); gnbList[i].addEventListener( &#34;mouseout&#34;, () &#61;> ( (gnbList[i].style.backgroundColor &#61; &#34;#fff&#34;), (subNav[i].style.backgroundColor &#61; &#34;#fff&#34;) ) ); }

jam · Answer

답변 너무감사드립니다.. 뇌정지 왔어서 잠시 휴식 취하고있었는데 다시 한번 해보겠습니다 ㅎㅎ

jam · Answer

혹시.. 질문하나만 더드리겠습니다함수안에 다 넣으면 되군요. 근데 왜 그런지 이해가 좀 쉽지 않네요 ..

맛스타 · Answer

링크 참고하시면 도움이 될 것 같습니다

jam · Answer

맛스타님 감사합니다 참고해보겠습니다

자바스크립트 메뉴 만들때 코드 단축화 질문드립니다.

5개의 답변

Q&A 목록