Проблема с селектором элементов jQuery
Вопрос
Моя проблема немного сложна.
У меня есть следующий код:
$(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', так и селектор ссылки '' '' '' '' 'со вкусом ", какой лучший способ заставить их работать вместе?"
"») Также кто-нибудь может объяснить мне, что делает код.
Спасибо.
Решение
Хорошо ... Вот что делает код:
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 а> & Quot ;. Страница 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
});
Если полная страница перезагружается, когда вы нажимаете домашнюю ссылку, и это предупреждение не появляется, вы нашли причину своей проблемы.