0

私の問題は少し複雑です。

私は次のコードを持っています：

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

    });

});

さて、最初にそれをコーディングしたのは私ではないので、それが何をするのか本当に理解できず、またそれを変更しようとしましたが、成功しませんでした。コードは「navli」リンクを選択し、AJAXの方法でページを表示します。これは、ページをリロードしないことを意味します。これは正しく行われます:)さて、ユーザーを登録するためのファンシーボックスを追加するためにやりたいことはすべてです。そのためには、次のコードを追加する必要があります。

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

これで、コードを$ document.readyfunctionに配置するだけで、ファンシーボックスが正常に機能し、navliリンクも適切に機能します。では、どこに問題があるのでしょうか。「navli」リンクをクリックしてコンテンツをロードし、ホームリンクをもう一度クリックすると（最初のページに戻ります）、ファンシーボックスが機能しなくなります。私はそれが非常に敏感であることを知っているので、あなたはそれをよく理解していないかもしれません、それでそれを別の方法で説明させてください。'nav li'のセレクターとファンシーボックスリンクのセレクターの両方がありますが、それらを一緒に機能させるための最良の方法は何ですか？

また、誰かが私にコードが何をするのかを説明することもできます。
ありがとうございました。

4

1 に答える 1

2

わかりました...コードの機能は次のとおりです。

    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」リンクの1つがこのハッシュで終了することを確認し（5文字が必要）、その場合は、#contentページhash + ".html"の#content要素を現在のページの要素にロードします（Iそれがdivだとしましょう）。

URL「 http：//.../page1.html#page2 」をロードするとします。Page1が読み込まれ、次にpage1の#contentでajax呼び出しによってpage2.htmlの#contentが読み込まれます。

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

ホームリンクをクリックしたときにページ全体が再読み込みされ、このアラートがポップアップしない場合は、問題の原因が見つかりました。

于 2009-03-14T16:10:33.563 に答える