jam
55
2020-08-29 11:41:02
5
210

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



// Top Menu
const gnbList = document.getElementsByClassName("gnb-list");
const subNav = document.getElementsByClassName("sub-nav");

gnbList[0].addEventListener(
  "mouseover",
  () => (
    (gnbList[0].style.backgroundColor = "red"),
    (subNav[0].style.backgroundColor = "red")
  )
);
gnbList[0].addEventListener(
  "mouseout",
  () => (
    (gnbList[0].style.backgroundColor = "#fff"),
    (subNav[0].style.backgroundColor = "#fff")
  )
);

gnbList[1].addEventListener(
  "mouseover",
  () => (
    (gnbList[1].style.backgroundColor = "red"),
    (subNav[1].style.backgroundColor = "red")
  )
);
gnbList[1].addEventListener(
  "mouseout",
  () => (
    (gnbList[1].style.backgroundColor = "#fff"),
    (subNav[1].style.backgroundColor = "#fff")
  )
);

gnbList[2].addEventListener(
  "mouseover",
  () => (
    (gnbList[2].style.backgroundColor = "red"),
    (subNav[2].style.backgroundColor = "red")
  )
);
gnbList[2].addEventListener(
  "mouseout",
  () => (
    (gnbList[2].style.backgroundColor = "#fff"),
    (subNav[2].style.backgroundColor = "#fff")
  )
);

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

for (i = 0i <4i++) {

  gnbList[i].addEventListener(
    "mouseover",
    () => (
      (gnbList[i].style.backgroundColor = "red"),
      (subNav[i].style.backgroundColor = "red")
    )
  );

  gnbList[i].addEventListener(
    "mouseout",
    () => (
      (gnbList[i].style.backgroundColor = "#fff"),
      (subNav[i].style.backgroundColor = "#fff")
    )
  );
}

0
  • 답변 5

  • 캐티
    310
    2020-08-29 12:06:22

    함수 안에서 이벤트 등록을 해줘야 하빈다.
    var 대신 let 이 궨히 나온 것은 아닌쩌염.

    // Top Menu
    const gnbList = document.getElementsByClassName("gnb-list");
    const subNav = document.getElementsByClassName("sub-nav");
    
    for (var i = 0; i <4; i++) test(i);
    function test(i){
      gnbList[i].addEventListener(
        "mouseover",
        () => (
          (gnbList[i].style.backgroundColor = "red"),
          (subNav[i].style.backgroundColor = "red")
        )
      );
    
      gnbList[i].addEventListener(
        "mouseout",
        () => (
          (gnbList[i].style.backgroundColor = "#fff"),
          (subNav[i].style.backgroundColor = "#fff")
        )
      );
    }
  • jam
    55
    2020-08-29 12:43:17

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

  • jam
    55
    2020-08-29 14:05:15

    혹시.. 질문하나만 더드리겠습니다

    함수안에 다 넣으면 되군요. 근데 왜 그런지 

    이해가 좀 쉽지 않네요 .. 

  • 맛스타
    29
    2020-08-29 15:37:17 작성 2020-08-29 15:39:23 수정됨

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

  • jam
    55
    2020-08-29 18:02:38

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

  • 로그인을 하시면 답변 을 등록할 수 있습니다.