JQuery fadeIn fadeOut 루프 문제

Question

아래 코드를 사용하여 내 페이지 내용에 대해 jQuery fadeIn fadeout 효과를 만들려고합니다. 사용자가 메인 링크 나 갤러리 링크 중 하나를 클릭 할 때마다

$(document).ready(function(){ 
$("#main").click(function(){ 
    $("#content").fadeOut(800, function(){ 
     $("#content").load("main.html", function(){ 
      $("#content").fadeIn(800); 
     }); 
    }); 
}); 

$("#gallery").click(function(){ 
    $("#content").fadeOut(800, function(){ 
     $("#content").load("gallery.html", function(){ 
      $("#content").fadeIn(800); 
     }); 
    }); 
}); 

}); 

그래서, 기존의 내용이 페이드 아웃 및 새로운 콘텐츠가 페이드. 내가 직면하고 문제는 모든 링크에 대해 내가 다시 동일한 코드를 반복해야한다는 것입니다 그리고 다시. 그래서 이것을 단순화하기 위해 루프를 사용하려고 시도했지만 작동하지 않습니다. 여기 내 코드는 다음과 같습니다.

var p = ["#main","#gallery", "#contact"]; 
var q = ["main.html", "gallery.html", "contact.html"]; 
for (i=0;i<=(p.length-1);i++){ 
    $(p[i]).click(function(){ 
    $("#content").fadeOut(500, function(){ 
     $("#content").load(q[i], function(){ 
      $("#content").fadeIn(500); 
     }); 
    }); 
}); 
} 

각 링크의 스크립트를 반복 작성하면 작동하지만 루프에서 결합 할 때 작동하지 않습니다. 나는 FadeOut 효과 만 얻고 그 후에는 아무 일도 일어나지 않습니다.

이것은 매우 간단한 문제이거나 jQuery의 깊이있는 것일 수 있습니다. 힌트 나 도움을 주시면 대단히 감사하겠습니다.

TK

하여 변수 i가 항상 Q [i]를 정의하게하는 3에서 평가

Answer 1

를 호출받는 함수를 작성

function buildChangeOverTo(src) 
{ 
    return function() { 
     var content = $("#content"); 
     content.fadeOut(500, function(){ 
      content.load(src, function(){ 
       content.fadeIn(500); 
     }}); 
    } 
} 

var p = ["#main","#gallery", "#contact"]; 
var q = ["main.html", "gallery.html", "contact.html"]; 
for (i=0;i<=(p.length-1);i++) { 
    $(p[i]).click(buildChangeOverTo(q[i])); 
} 

웹상에서 이상한 자바 스크립트 클로저에 대한 많은 정보가 있습니다.

Answer 2

. 클래스와 마찬가지로 콜백에 연결된 숫자를 유지하는 방법을 찾아야합니다.

정말로 3 개의 링크 인 경우 case 문과 같이 간단한 것이 좋습니다. 당신은 코드 중복에 대해 걱정하는 경우

switch $(this).attr('id') { 
    case 'gallery' : ; break; 
    case 'contact' : y; break; 
    case 'main' : z; break; 
} 

는 그냥 어떤 페이지를로드하고 당신은 i 또는 q[i]의 현재 값을 캡처 할 수 있습니다) (각 .click에

Answer 3

나는 링크에 클래스를 추가함으로써이 문제를 해결할 것이다. 예를 들어 fadeLink와 나는 fadeUrl과 같은 링크에 맞춤 속성을 추가 할 것이다. 나는 각 링크에 fadeUrl 속성에 링크 대상을 설정합니다 다음 문서 준비 코드는 다음과 같을 수 있습니다 :

$(document).ready(function(){ 
    $(".fadeLink").click(function(){ 
     var jqThis = $(this); 
     $("#content").fadeOut(800, function(){ 
            $("#content").load(jqThis.attr("fadeUrl"), function(){ 
                $("#content").fadeIn(800); 
      }); 
     }); 
    }); 
}); 

이 루프를 단계 측 것이며 만이 미래에 추가하거나 편집 링크하기 링크의 데이터를 변경합니다.