jQuery 요소 선택기 문제

Question

내 문제는 조금 복잡합니다.

다음 코드가 있습니다.

$(document).ready(function() {

    var hash = window.location.hash.substr(1);
    var href = $('#nav li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.html #content';
            $('#content').load(toLoad)
        }                                           
    });

    $('#nav li a').click(function(){

        var toLoad = $(this).attr('href')+' #content';
        $('#content').hide('fast',loadContent);
        $('#load').remove();
        $('#wrapper').append('<span id="load">LOADING...</span>');
        $('#load').fadeIn('normal');
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
        function loadContent() {
            $('#content').load(toLoad,'',showNewContent())
        }
        function showNewContent() {
            $('#content').show('normal',hideLoader());
        }
        function hideLoader() {
            $('#load').fadeOut('normal');
        }
        return false;

    });

});

좋아, 먼저 그것을 코딩 한 사람이 아니기 때문에, 나는 그것이 무엇을하는지 정말로 이해하지 못하고 또한 그것을 바꾸려고 노력했지만 성공하지 못했습니다. 코드는 'Nav Li'링크를 선택하고 페이지를 Ajax 방식으로 표시합니다. 이는 다시로드하지 않고 의미합니다. 이것은 올바르게 수행합니다 :) 이제, 사용자를 등록하기 위해 Fancybox를 추가하기 위해하고 싶습니다. 그렇게하려면 다음 코드를 추가해야합니다.

$("a#reg").fancybox({
    'hideOnContentClick': false
});

이제 코드를 $ document.readyFunction에 넣고 멋진 상자가 작동하는대로 작동하며 Nav LI 링크도 잘 작동합니다. 그렇다면 문제는 어디에 있습니까? 'Nav Li'링크를 클릭하고 내용을로드 한 다음 홈 링크를 다시 클릭하면 (첫 번째 페이지로 돌아 가기) 멋진 상자가 더 이상 작동하지 않습니다. 나는 그것이 매우 민감하다는 것을 알고 있으므로 당신이 그것을 잘못 이해했을 수도 있습니다. 그래서 다른 방법으로 설명하겠습니다. 나는 'Nav Li'의 선택기와 Fancy Box Link의 선택기를 모두 가지고 있습니다. 그것들이 함께 작동하게하는 가장 좋은 방법은 무엇입니까?

또한 누군가가 코드가 무엇을하는지 설명 할 수 있습니다.
고맙습니다.

Answer 1

좋아 ... 여기 코드가하는 일이 있습니다.

    var hash = window.location.hash.substr(1);
    var href = $('#nav li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
                var toLoad = hash+'.html #content';
                $('#content').load(toLoad)
        }                                                                                       
    });

이 첫 번째 부분은 해시시 현재 페이지의 "Nav Li"링크 중 하나 가이 해시 (5 숯으로 예상)로 끝나고 경우가 발생하면 #content 페이지 요소 hash + ".html" 에서 #content 현재 페이지의 요소 (나는 그것이 div라고 생각합니다).

URL을로드한다고 상상해보십시오 "http : //.../page1.html#page2". Page1이로드 된 다음 #Content of Page2.html은 #Content의 Ajax 호출에 의해로드됩니다.

    $('#nav li a').click(function(){

        var toLoad = $(this).attr('href')+' #content';
        $('#content').hide('fast',loadContent);
        $('#load').remove();
        $('#wrapper').append('<span id="load">LOADING...</span>');
        $('#load').fadeIn('normal');
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
        function loadContent() {
                $('#content').load(toLoad,'',showNewContent())
        }
        function showNewContent() {
                $('#content').show('normal',hideLoader());
        }
        function hideLoader() {
                $('#load').fadeOut('normal');
        }
        return false;

    });

"Nav Li"링크에 다음 동작이 추가됩니다. 클릭하면 "로드 메시지"를 표시하고 현재 페이지의 #Content 요소에 대상 페이지의 #Content를로드하십시오.

나는 왜이 스크립트가 끔찍한 지에도 불구하고, 당신의 멋진 박스가 보여주지 않을지 전혀 모른다. 내 생각에 "Nav Li"링크는 Ajax 호출로 컨텐츠를로드하고 이미로드 된 Fancybox에는 영향을 미치지 않지만 홈 링크를 클릭하면 페이지가 완전히 다시로드되고 FancyBox 코드가 아닙니다. 이유가 있기 때문에 실행되었습니다. 간단한 경고를 추가하여 확인할 수 있습니다.

alert("initializing fancybox");
$("a#reg").fancybox({
    'hideOnContentClick': false
});

홈 링크를 클릭하면 전체 페이지가 다시로드 되고이 경고가 팝업되지 않으면 문제의 원인이 발견되었습니다.