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 回答