고수님들 스크립트좀 줄여주세요...ㅠㅠ

고수님들 스크립트좀 줄여주세요...ㅠㅠ

QA

고수님들 스크립트좀 줄여주세요...ㅠㅠ

답변 5

본문


<script>
//메뉴 롤오버 소스
var index = 1;
$(document).ready(function(){
    $("#menu1").mouseover(function(){
        $("#under_m1").fadeIn(200);        
        $("#under_m2").fadeOut(200);
        $("#under_m3").fadeOut(200);
        $("#under_m4").fadeOut(200);
        $("#under_m5").fadeOut(200);
    });
    $("#menu2").mouseover(function(){
        $("#under_m2").fadeIn(200);
        $("#under_m1").fadeOut(200);    
        $("#under_m3").fadeOut(200);
        $("#under_m4").fadeOut(200);
        $("#under_m5").fadeOut(200);
    });
    $("#menu3").mouseover(function(){
        $("#under_m3").fadeIn(200);
        $("#under_m1").fadeOut(200);
        $("#under_m2").fadeOut(200);        
        $("#under_m4").fadeOut(200);
        $("#under_m5").fadeOut(200);
    });
        $("#menu4").mouseover(function(){
        $("#under_m4").fadeIn(200);
        $("#under_m1").fadeOut(200);
        $("#under_m2").fadeOut(200);
        $("#under_m3").fadeOut(200);
        $("#under_m5").fadeOut(200);
    });
        $("#menu5").mouseover(function(){
        $("#under_m5").fadeIn(200);
        $("#under_m1").fadeOut(200);
        $("#under_m2").fadeOut(200);
        $("#under_m3").fadeOut(200);
        $("#under_m4").fadeOut(200);
    });
    $("#under_m1,#under_m2,#under_m3,#under_m4,#under_m5").mouseleave(function() {
        $("#under_m1").fadeOut(200);
         $("#under_m2").fadeOut(200);         
        $("#under_m3").fadeOut(200);
        $("#under_m4").fadeOut(200);
        $("#under_m5").fadeOut(200);
    });
});
</script>
 

이 소스인데..

이게 10개면 저렇게 100개가 생겨야 한다는 말인데...

계속 늘릴려니 끝도 없이 늘어날것 같아서요...

고수님들이라면 줄일 수 있을거라 믿습니다..

줄여주세요..ㅠㅠ

이 질문에 댓글 쓰기 :

답변 5

아래처럼 간단하게 줄일 수 있습니다.

 


$(document).ready(function() {
    $("[id^=menu]").mouseenter(function() {
        no = $(this).attr("id").match(/\d+$/)[0];
        $("#under_m"+no).fadeIn(200);
    })
    .mouseleave(function() {
        $("[id^=under_m]").fadeOut(200);
    });
});

 

+ 셀렉터

- https://api.jquery.com/attribute-starts-with-selector/

 

+ 마우스 이벤트

- https://api.jquery.com/mouseover/#mouseover-handler

스타일 정보도 없고, div 구조도 없고,
단지 반복되는 코드 줄이는 것에만 맞춰 답변을 남긴 것인데
어느 부분에서 완벽하지 않은 것인지 궁금하군요.
* mouseover/mouseout 이벤트로 변경해봤어요?
* 그냥 EOA 처리.

네 원래는 under_m 부분에서 마우스 리브 떠날때 사라지는것 까지는 했는데요....
문제는 under_m 부분이 서로 겹쳐져 버리네요..ㅠㅠ 공부는 하고 있는데요...
----
$(document).ready(function() {
    $("[id^=menu]").mouseenter(function() {
        no = $(this).attr("id").match(/\d+$/)[0];
        $("#under_m"+no).fadeIn(200);
    })
    $("[id^=under_m]").mouseleave(function() {
        $("[id^=under_m]").fadeOut(200);
    });
});
-----
코드는 대략 이렇게 수정해 보았는데요...안됩니다...
under_m 부분에서 마우스가 떠나면 사라지고...
menu1,menu2 부분에서 마우스가 움직이면 기존에 under_m 부분이 사라지고 새로운 것이 나와야 하는데요..2개가 겹쳐서 나옵니다...지금 공부하고 있는데..어렵네용..
감사합니다..^^;

for 문을 쓰시면....아니면 foreach....

해당 구문이 비슷한 방식이 추가 되는거라면 for문으로 하시는게 좋을듯 합니다.

 $("#under_m1,#under_m2,#under_m3,#under_m4,#under_m5").mouseover(function(){

  $("#under_m1,#under_m2,#under_m3,#under_m4,#under_m5").fadeOut(200);

  $(this).fadeIn(200);

});

 $("#under_m1,#under_m2,#under_m3,#under_m4,#under_m5").mouseleave(function() { $(this).fadeOut(200); });

 

마우스오버하면 전제를 안보이게 했다가 해당 되는 것만 다시 보이게 해주면 되죠

이런건 class로 하면 한꺼번에 컨트롤 하는 코드가 간단해집니다

 

 

 

 

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 13
© SIRSOFT
현재 페이지 제일 처음으로