왕초보 스크립트 질문
본문
안녕하세요 ㅠㅠ 왕초보 스크립트 질문 하나 여쭐게요!
<script>
$(function(){
$('#down-m .m1').on('mouseover',function(){
$('.pc-menu .nav-top.nav-both .menu-li:nth-child(1) a span.hi').addClass('hi-hover');
});
$('#down-m .m1').on('mouseleave',function(){
$('.pc-menu .nav-top.nav-both .menu-li:nth-child(1) a span.hi').removeClass('hi-hover');
});
})
</script>
위 스크립트에서 숫자 1이 들어간 부분(파란글씨)을
1~5까지 총 다섯번 돌리는 for문으로 쓰고 싶습니다ㅠㅠ
어찌써야할까요?
답변 1
<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>
답변해주셔서 감사합니다 ㅠㅠ 근데 제가 저부분을 위에 코드에도 나타나듯이 마우스가 hover될때마다 해당 클래스를 계속 주려고 하는데 제대로 작동을 안하네요ㅠㅠ for문을 써서 그럴까요? 한바퀴돌아가고 더이상 안돌아가니 적용이 안되는 걸까요?ㅠㅠ 혹 아시면 답변 부탁드립니다. 감사합니다!!
아래 소스 안되시면, HTML소스를 봐야 합니다~선택자와 class가 잘못되어 있을수도 있어요.^^
<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>
ㅠㅠ정말 감사합니다, i대신에 숫자를 기입해서 나열하면 잘되는데 for문으로 돌리면 안먹히네요ㅠㅠ 왜그런지 잘 찾아보도록 하겠습니다, 정말정말 감사합니다!
HTML 소스에서
.m1 .m2 .m3 .m4 .m5 <---이 클래스들을
m1 로 전부 변경하시고 아래소스 사용해보세요.
<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>
저도 For문이 안먹히는지는 그렇게 안써봐서 몰랐었네요^^;;
m1,m2,m3,m4,m5가 각각다 다른 스타일을 먹고 있어서 m1으로 변경하면 오류가 나기 때문에 안될 것같습니다ㅠ 답변 진심으로 감사합니다!! 최고최고!!
포기할수가 없네요 ㅎㅎㅎ
.m1 .m2 .m3 .m4 .m5 <---이 클래스들 옆에 m_hover class 하나 추가하시고, 소스 돌려보세요^^
class="m1 m_hover"
<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>
