javascript - jQuery 没有在幻灯片容器 div 中加载项目

Question

单击图像时，项目文本似乎出现，但标题重复，“返回投资组合”按钮和标题按钮似乎不起作用。

如果您返回“投资组合”页面，项目文本仍会出现。

http://www.janinejauvel.com/test/

html

<li style="height:393px;" data-src="http://www.janinejauvel.com/wp-content/uploads/2012/09/editorial-1-rwd-magazine.png">
<span class="cover" style="width:308px;height:0px;background-image:url('http://www.janinejauvel.com/wp-content/uploads/2012/09/bg-white.png')"></span>
<hgroup style="width:308px;height:393px;background-image:url('http://www.janinejauvel.com/wp-content/uploads/2012/09/bg-white.png')" data-project="test/dirty-fashion">
                        <div>
                            <h3>Editorial I</h3>
                            <span class="dash">&mdash;</span>
                            <p>RWD Magazine</p>
                        </div>
                    </hgroup>
                </li>

脚本.js

// load the project into the slideshow container div
                $('#slideshow-container').load('' + $hgroup.attr('data-project'), function() {
                    // bind slideshow
                        slideshow.render();
                        $('section#work').css('margin-top', '0px');
                });

            });


$(document).ready(function() {

    hattie.init();
    hattie.clickEvents();
    hattie.loadImages();

});

$(window).resize(function() {

    // get the currently active project, if there is one

    if ($('#slideshow').length > 0) {


        var activeProject   = $('#slideshow').attr('class');

        // trigger click
        $('hgroup[data-project="'+ activeProject + '"]').trigger('click');

    }


});

Answer 1

因为当您调用 load 时，您会将整个 HTML 页面加载到包含该标题元素的 div 中。

查看您正在加载的页面上的内容：http ://www.janinejauvel.com/test/dirty-fashion

你只想要内容。查看加载页面片段。

Answer 2

尝试改变：

$('#slideshow-container').load('' + $hgroup.attr('data-project'), function() {

到：

$('#slideshow-container').load('' + $hgroup.attr('data-project') + ' #content', function() {

这将在 $hgroup.attr('data-project') 中加载 url 的内容 div。