고수님들 스크립트좀 줄여주세요...ㅠㅠ 채택완료
</p>
<p><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></p>
<p>이 소스인데..
이게 10개면 저렇게 100개가 생겨야 한다는 말인데...
계속 늘릴려니 끝도 없이 늘어날것 같아서요...
고수님들이라면 줄일 수 있을거라 믿습니다..
줄여주세요..ㅠㅠ
답변 5개
아래처럼 간단하게 줄일 수 있습니다.
</p>
<p>$(document).ready(function() {</p>
<p> $("[id^=menu]").mouseenter(function() {
no = $(this).attr("id").match(/\d+$/)[0];
$("#under_m"+no).fadeIn(200);
})
.mouseleave(function() {
$("[id^=under_m]").fadeOut(200);
});</p>
<p>});</p>
<p>
+ 셀렉터
- https://api.jquery.com/attribute-starts-with-selector/
+ 마우스 이벤트
답변에 대한 댓글 4개
단지 반복되는 코드 줄이는 것에만 맞춰 답변을 남긴 것인데
어느 부분에서 완벽하지 않은 것인지 궁금하군요.
* mouseover/mouseout 이벤트로 변경해봤어요?
* 그냥 EOA 처리.
문제는 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개가 겹쳐서 나옵니다...지금 공부하고 있는데..어렵네용..
감사합니다..^^;
답변자님의 성의에~~ Cheers~~!
댓글을 작성하려면 로그인이 필요합니다.
$("#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로 하면 한꺼번에 컨트롤 하는 코드가 간단해집니다
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 1개
무뇌인이라..ㅠㅠ
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
감사합니다.