테스트 사이트 - 개발 중인 베타 버전입니다

왕초보 스크립트 질문 채택완료

ghwn1111 7년 전 조회 1,971

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

 

    

 

 

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

 

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

 

어찌써야할까요?

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

답변 1개

채택된 답변
+20 포인트
7년 전

</p>

<p><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></p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 6개

g
ghwn1111
7년 전
답변해주셔서 감사합니다 ㅠㅠ 근데 제가 저부분을 위에 코드에도 나타나듯이 마우스가 hover될때마다 해당 클래스를 계속 주려고 하는데 제대로 작동을 안하네요ㅠㅠ for문을 써서 그럴까요? 한바퀴돌아가고 더이상 안돌아가니 적용이 안되는 걸까요?ㅠㅠ 혹 아시면 답변 부탁드립니다. 감사합니다!!
배모씨
7년 전
아래 소스 안되시면, 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]
g
ghwn1111
7년 전
ㅠㅠ정말 감사합니다, i대신에 숫자를 기입해서 나열하면 잘되는데 for문으로 돌리면 안먹히네요ㅠㅠ 왜그런지 잘 찾아보도록 하겠습니다, 정말정말 감사합니다!
배모씨
7년 전
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문이 안먹히는지는 그렇게 안써봐서 몰랐었네요^^;;
g
ghwn1111
7년 전
m1,m2,m3,m4,m5가 각각다 다른 스타일을 먹고 있어서 m1으로 변경하면 오류가 나기 때문에 안될 것같습니다ㅠ 답변 진심으로 감사합니다!! 최고최고!!
배모씨
7년 전
포기할수가 없네요 ㅎㅎㅎ
.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]

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

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

로그인