Question

我在文件夹PROJECTS中有10个html页面，除了上一个和下一个箭头外，一切正常。问题是，如果您在exp的最后一页上导航。从我的Projects文件夹中的projectPage_10.html，我希望下一页是projectPage_1.html我得到空白页面......同样的事情是，如果我在projectPage_1.html上使用prev btn导航，我希望下一页是projectPage_10。 HTML ...你可以猜我得到空白页面。任何建议我应该改变什么？ TY !!

这是我从Projects文件夹中加载内容的方式：

function portfolioInit() {

            var newHash      = "",
                $mainContent = $("#portfolio-ajax"),
                $pageWrap    = $("#portfolio-wrap"),
                        root         = '#!projects/',
                rootLength   = root.length,
                url;

            $portfolioItems.find("a").click(function() {
                window.location.hash = $(this).attr("href");
                return false;
            });


            $(window).bind('hashchange', function(){

                newHash = window.location.hash;
                url = newHash.replace(/[#\!]/g, '' );
                if (newHash.substr(0,rootLength) == root) {
                    if($pageWrap.is(':hidden')){
                        $pageWrap.slideDown('3000', function(){});
                    }

这是导航：

if(statusText == "error"){
                            $mainContent.html('<div class="row pad-top pad-bottom"><div class="col-md-12 pad-top pad-bottom"><div class="alert-message error"><p>The Content cannot be loaded.</p></div></div></div>');
                            $pageWrap.find('#preloader').remove();
                        }
                        closeProject();
                        nextProject();
                        prevProject();
                    });

                   $("#portfolio-items article").removeClass("current");
                   $("#portfolio-items a[href='" + newHash + "']").parent().addClass("current");
                 var projectIndex = $('#portfolio-items').find('article.current').index();
                    var projectLength = $('#portfolio-items article').length -1;

                    if(projectIndex == projectLength){

                        jQuery('#next-project').addClass('disabled');
                        jQuery('#prev-project').removeClass('disabled');

                    }else if(projectIndex == 0){

                        jQuery('#prev-project').addClass('disabled');
                        jQuery('#next-project').removeClass('disabled');

                    }else{
                        jQuery('#prev-project, #next-project').removeClass('disabled');

                    }
                }
                else if(newHash == '')
                {
                    $('#portfolio-wrap').fadeOut('100', function() {
                        $('.single-portfolio').remove();
                    });
                }
            });

            $(window).trigger('hashchange');
        }

        function closeProject() {
                 $('#close-project').on('click', function() {
                $('#portfolio-wrap').fadeOut('100', function() {
                    $('.single-portfolio').remove();
                });                  
                history.pushState('', document.title, window.location.pathname);
                window.location.hash = '#_';
                return false;
            });
        } 

        function nextProject() {
            $("#next-project").on("click", function() {
                $('.single-portfolio').remove();
                window.location.hash = $("#portfolio-items .current").next().find('a').attr("href");
                return false;
            });
        }


        function prevProject() {
            $("#prev-project").on("click", function() {
                $('.single-portfolio').remove();
                window.location.hash = $("#portfolio-items .current").prev().find('a').attr("href");
                return false;
            });
        }

Answer 1

尝试使用变量存储当前项目索引。

projectIndex = 0;

function nextProject() {
    $("#next-project").on("click", function() {
        $('.single-portfolio').remove();
        if(projectIndex == $("#portfolio-items .current").get().length - 1) projectIndex = 0;
        else projectIndex++;
        window.location.hash = $("#portfolio-items .current").get(projectIndex).find('a').attr("href");
        return false;
    });
}


function prevProject() {
    $("#prev-project").on("click", function() {
        $('.single-portfolio').remove();
        if(projectIndex == 0) projectIndex = $("#portfolio-items .current").get().length - 1;
        else projectIndex--;
        window.location.hash = $("#portfolio-items .current").get(projectIndex).find('a').attr("href");
        return false;
    });
}

上一个和下一个箭头不会循环

1 个答案: