Question

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

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

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>

的script.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

你只想要内容。查看加载page fragments。

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。

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

2 个答案: