왕초보 스크립트 질문

왕초보 스크립트 질문

QA

왕초보 스크립트 질문

본문

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

 

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

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  <---이 클래스들 옆에 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>

답변을 작성하시기 전에 로그인 해주세요.
전체 68
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT