0

私はポートフォリオプロジェクトに取り組んでいます。AJAX を使用して、別の共有ドメイン ページから新しく作成されたポップアップ div にコンテンツをロードするカスタム ライトボックス スタイル スクリプトを作成したいと考えています。コンテンツの配信中に読み込みバーが表示されます。

問題: コンテンツがポップアップ ウィンドウにロードされません。AJAX は#single-project-wrapper、別のページからセクションのコンテンツを取得し、それ#framebox-contentを jQuery を使用してホームページの本文に追加されたセクションにロードする必要があります。

これが私のコードです： 

jQuery(document).ready(function(){

    var $ = jQuery;

    jQuery('.framebox-trigger').click(function(e){

        // Prevent default linking
        e.preventDefault();

                             // Add content for lightbox type display
        var $singleContent = '<div id="framebox-overlay">' +
                               '<section id="framebox-content">' +
                                  '<div class="framebox-close">' +
                                    '<p>Click to close</p>' +
                                  '</div>' +
                                  //AJAX to insert #single-project-wrapper content here
                                '</section>' +
                              '</div>',
                 $bodyCall = $('body'),
                   $toLoad = $(this).attr('href')+' #single-project-wrapper';


    // Add overlay and loading bar
    $bodyCall.removeClass('framebox-freeze');
    $bodyCall.addClass('framebox-freeze').append($singleContent, loadContent);
    // Add loading beacon
    $('.framebox-freeze').append('<span id="framebox-loading">+ Loading +</span>');
    $('#framebox-loading, #framebox-overlay').fadeIn('fast');

    // Load AJAX content
    function loadContent(){
        $('#framebox-content').load($toLoad , showNewContent)
    };

    // Show loaded AJAX content and hide loading bar
    function showNewContent(){
        $('#single-project-wrapper').show('normal', hideLoader)
    };

    // Hide loading bar
    function hideLoader(){
        $('#framebox-loading').fadeOut('fast')
    };

    });

    // Close out Framebox
    jQuery(document).on('click', '#framebox-overlay, #framebox-close', function(){
        $bodyCall.removeClass('framebox-freeze');
        $('#framebox-overlay, #framebox-loading').fadeOut('fast');
  });

});

何がいけないのかわからない！！

知っておくべき重要なその他の事項:

  • これはwordpressサイトで実行されています
  • この時点で、サイトは MAMP を介してローカルでのみ実行されています

誰かが私を助けることができれば、それは大歓迎です。私は jQuery を初めて使用し、学習しようとしています。これは、いくつかのチュートリアルのマッシュアップです。ぐちゃぐちゃだったらごめんなさい。他に何か必要な場合はお知らせください。

編集/更新!!!!!

以下で@ᾠῗᵲᄐᶌが言ったように、私は.appendすべて間違って使用していました. この行を変更する:

$bodyCall.addClass('framebox-freeze').append($singleContent, loadContent);

この作品に：

$bodyCall.addClass('framebox-freeze').append($singleContent).fadeIn('fast', loadContent);

これにより、コンテンツの取得の問題が解決されます。

ただし、コンテンツは最初のリンク選択時に正常に読み込まれますが、その後の選択では読み込みバーが消えず、読み込まれたコンテンツの上に浮かんでいます。それについて何か考えはありますか？

4

1 に答える 1

0

関数 loadContent() では、「toLoad」の前に $ 記号を付ける必要があります。これは、以前に作成した jquery 変数であるためです。

于 2013-08-09T16:12:13.083 に答える