고수님들 스크립트좀 줄여주세요...ㅠㅠ
본문
<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/
+ 마우스 이벤트
흠..완벽하지는 않지만..이 소스를 바탕으로 공부좀 하겠습니다.
감사합니다.
스타일 정보도 없고, 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개가 겹쳐서 나옵니다...지금 공부하고 있는데..어렵네용..
감사합니다..^^;
이정도면 주어진 정보내에선 최선인데 말이죠..
답변자님의 성의에~~ Cheers~~!
for 문을 쓰시면....아니면 foreach....
fadein 문하고 dadeout문이 들어가서..이게 for문으로 될런지...
그건 for 문하고 아무 관련이 없을건데...
해당 구문이 비슷한 방식이 추가 되는거라면 for문으로 하시는게 좋을듯 합니다.
초보라 어렵네요..ㅠㅠ 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로 하면 한꺼번에 컨트롤 하는 코드가 간단해집니다
