왕초보 스크립트 질문

ghwn1111

2018-07-02 (월) 14:15:02 2,176

안녕하세요 ㅠㅠ 왕초보 스크립트 질문 하나 여쭐게요!

위 스크립트에서 숫자 1이 들어간 부분(파란글씨)을

1~5까지 총 다섯번 돌리는 for문으로 쓰고 싶습니다ㅠㅠ

어찌써야할까요?

영카트5 스크립트 초보

답변 1개 / 댓글 6개

채택된 답변

+20 포인트

배모씨

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2018-07-02 (월) 14:22:54

Copy

<script>
 $(function(){
  for(var i=1; i<=5; i++){
   $('#down-m .m'+i).on('mouseover',function(){
    $('.pc-menu .nav-top.nav-both .menu-li:nth-child('+i+') a span.hi').addClass('hi-hover');
   });
   $('#down-m .m'+i).on('mouseleave',function(){
    $('.pc-menu .nav-top.nav-both .menu-li:nth-child('+i+') a span.hi').removeClass('hi-hover');
   });
  }
 })
</script>

답변에 대한 댓글 6개

ghwn1111

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2018-07-02 (월) 14:56:05

답변해주셔서 감사합니다 ㅠㅠ 근데 제가 저부분을 위에 코드에도 나타나듯이 마우스가 hover될때마다 해당 클래스를 계속 주려고 하는데 제대로 작동을 안하네요ㅠㅠ for문을 써서 그럴까요? 한바퀴돌아가고 더이상 안돌아가니 적용이 안되는 걸까요?ㅠㅠ 혹 아시면 답변 부탁드립니다. 감사합니다!!

배모씨

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2018-07-02 (월) 15:01:05

아래 소스 안되시면, HTML소스를 봐야 합니다~선택자와 class가 잘못되어 있을수도 있어요.^^
[code]
<script>
$(function(){
for(var i=1; i<=5; i++){
$('#down-m .m'+i).hover(function(){
$('.pc-menu .nav-top.nav-both .menu-li:nth-child('+i+') a span.hi').addClass('hi-hover');
},function(){
$('.pc-menu .nav-top.nav-both .menu-li:nth-child('+i+') a span.hi').removeClass('hi-hover');
});
}
});
</script>
[/code]

ghwn1111

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2018-07-02 (월) 15:06:29

ㅠㅠ정말 감사합니다, i대신에 숫자를 기입해서 나열하면 잘되는데 for문으로 돌리면 안먹히네요ㅠㅠ 왜그런지 잘 찾아보도록 하겠습니다, 정말정말 감사합니다!

배모씨

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2018-07-02 (월) 15:38:38

HTML 소스에서
.m1 .m2 .m3 .m4 .m5 <---이 클래스들을
m1 로 전부 변경하시고 아래소스 사용해보세요.

[code]
<script>
$(function(){
$('#down-m .m1').hover(function(){
$('.pc-menu .nav-top.nav-both .menu-li:nth-child('+($("#down-m .m1").index(this)+1)+') a span.hi').addClass('hi-hover');
},function(){
$('.pc-menu .nav-top.nav-both .menu-li:nth-child('+($("#down-m .m1").index(this)+1)+') a span.hi').removeClass('hi-hover');
});
});
</script>
[/code]
저도 For문이 안먹히는지는 그렇게 안써봐서 몰랐었네요^^;;

ghwn1111

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2018-07-02 (월) 17:12:01

m1,m2,m3,m4,m5가 각각다 다른 스타일을 먹고 있어서 m1으로 변경하면 오류가 나기 때문에 안될 것같습니다ㅠ 답변 진심으로 감사합니다!! 최고최고!!

배모씨

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2018-07-02 (월) 17:15:56

포기할수가 없네요 ㅎㅎㅎ
.m1 .m2 .m3 .m4 .m5 <---이 클래스들 옆에 m_hover class 하나 추가하시고, 소스 돌려보세요^^
class="m1 m_hover"

[code]
<script>
$(function(){
$('#down-m .m_hover').hover(function(){
$('.pc-menu .nav-top.nav-both .menu-li:nth-child('+($("#down-m .m_hover").index(this)+1)+') a span.hi').addClass('hi-hover');
},function(){
$('.pc-menu .nav-top.nav-both .menu-li:nth-child('+($("#down-m .m_hover").index(this)+1)+') a span.hi').removeClass('hi-hover');
});
});
</script>
[/code]

답변을 작성하려면 로그인이 필요합니다.

왕초보 스크립트 질문

답변 1개 / 댓글 6개

답변에 대한 댓글 6개

공유하기