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

Prev and next arrow wont loop

本文关键字：循环 下一个 上一个      更新时间：2023-10-14

我在文件夹PROJECTS中有10个html页面，除了上一个和下一个箭头外，一切都很好。问题是，如果你从我的Projects文件夹中导航到exp.projectPage_10.html的最后一页，而我希望下一页是projectPage_1.html，我会得到空白页。。。同样的事情是，如果我在projectPage_1.html上使用prev-btn导航，并且我希望下一个页面是projectPage_10.html……你可以猜到我得到的是空白页面。有什么建议我应该改变吗？泰！！

这就是我从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;
            });
        }

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

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;
    });
}
相关文章：