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'的选择器和花式盒子链接的选择器，让它们一起工作的最佳方法是什么？

也可以有人向我解释代码的作用。
谢谢。

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)
        }                                                                                       
    });

第一部分将获取当前页面的hash，检查其中一个“nav li”链接是否以此哈希结束（预期为5个字符），如果是这种情况，则会加载{{1}当前页面的#content元素中的页面hash + ".html"的元素（我想它是div）。

想象一下，您加载了网址“http://.../page1.html#page2”。将加载Page1，然后在page1的#content中通过ajax调用加载page2.html的#content。

#content

这将向“nav li”链接添加以下行为：单击时，显示“加载消息”并在当前页面的#content元素中加载目标页面的#content。

我不知道为什么这个剧本，尽管很糟糕，会导致你的fancybox不显示。我的猜测是“nav li”链接将使用ajax调用加载内容，这不会影响已加载的fancybox，但是当您单击主页链接时，页面将完全重新加载，并且fancybox代码不会执行，有一个原因。您可以通过添加简单警报来检查：

    $('#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;

    });

如果单击主页链接时重新加载整页，并且没有弹出此警报，则表明您的问题是原因。

jQuery元素选择器问题

1 个答案: