Проблема с селектором элементов jQuery - PullRequest
Новая
       19

Проблема с селектором элементов jQuery

0 голосов
/ 14 марта 2009

Моя проблема немного сложна.

У меня есть следующий код: 

$(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» и загружаю содержимое, а затем снова щелкаю ссылку «home» (я возвращаюсь на первую страницу), эта галочка больше не работает. Я знаю, что это очень чувствительно, так что, может быть, вы плохо поняли это, поэтому позвольте мне объяснить это по-другому. У меня есть как селектор 'nav li', так и селектор ссылки '' Причудливый ящик '', какой лучший способ заставить их работать вместе ??

Также может кто-нибудь объяснить мне, что делает код.
Спасибо.

1 Ответ

2 голосов
/ 14 марта 2009

Хорошо ... Вот что делает код: 

    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". Страница 1 будет загружена, а затем #content of page2.html будет загружена с помощью ajax-вызова в #content of page1. 

    $('#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 текущей страницы.

Я понятия не имею, почему этот скрипт, несмотря на то, что он ужасен, может привести к тому, что ваш fancybox не будет отображаться. Я предполагаю, что ссылки "nav li" загрузят содержимое с помощью вызова ajax, и это не повлияет на ваш fancybox, который уже загружен, но когда вы нажимаете домашнюю ссылку, страница полностью перезагружается, а код fancybox не выполнено по причине. Вы можете проверить это, добавив простое предупреждение: 

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

Если полная страница перезагружается, когда вы нажимаете домашнюю ссылку, и это предупреждение не появляется, вы нашли причину своей проблемы.

...