Copy
<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개 / 댓글 7개
채택된 답변
+20 포인트
2020-04-06 (월) 15:25:05
아래처럼 간단하게 줄일 수 있습니다.
Copy
$(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/
+ 마우스 이벤트
답변에 대한 댓글 4개
2020-04-06 (월) 16:03:45
BiHon
2020-04-06 (월) 16:19:22
스타일 정보도 없고, div 구조도 없고,
단지 반복되는 코드 줄이는 것에만 맞춰 답변을 남긴 것인데
어느 부분에서 완벽하지 않은 것인지 궁금하군요.
* mouseover/mouseout 이벤트로 변경해봤어요?
* 그냥 EOA 처리.
단지 반복되는 코드 줄이는 것에만 맞춰 답변을 남긴 것인데
어느 부분에서 완벽하지 않은 것인지 궁금하군요.
* mouseover/mouseout 이벤트로 변경해봤어요?
* 그냥 EOA 처리.
2020-04-06 (월) 16:30:24
네 원래는 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개가 겹쳐서 나옵니다...지금 공부하고 있는데..어렵네용..
감사합니다..^^;
문제는 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개가 겹쳐서 나옵니다...지금 공부하고 있는데..어렵네용..
감사합니다..^^;
백수1995
2020-04-07 (화) 10:22:14
이정도면 주어진 정보내에선 최선인데 말이죠..
답변자님의 성의에~~ Cheers~~!
답변자님의 성의에~~ Cheers~~!
2020-04-06 (월) 19:15:18
$("#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로 하면 한꺼번에 컨트롤 하는 코드가 간단해집니다
2020-04-06 (월) 15:09:45
코드가 반복되는 것이 문제라면 반복되는 부분을 함수로 처리하세요.
2020-04-06 (월) 14:35:34
해당 구문이 비슷한 방식이 추가 되는거라면 for문으로 하시는게 좋을듯 합니다.
답변에 대한 댓글 1개
for 문을 쓰시면....아니면 foreach....
답변에 대한 댓글 2개
답변을 작성하려면 로그인이 필요합니다.
감사합니다.