如何在没有 PHP 的情况下按顺序链接到下一页和上一页（仅 jQuery/javascript）

Question

假设我有一系列页面（“example_1.html”、“example_2.html”、“example_3.html”等），并且我希望每个页面都有下一个/上一个按钮。我不想要任何过于花哨的分页，只需要 prev 和 next 按钮。

我还希望这些页面在到达结尾后循环回来，这样“example_12.html”自然会循环回到开头的“example_1.html”。

我希望能够通过创建另一个页面来简单地将页面添加到序列中，而无需返回现有页面来更改链接。

有没有一种简单的方法可以在没有 php 或服务器端数据获取的情况下做到这一点？此外，我不想随着时间的推移添加更多页面而不断更新列表，并且我不想在页面中包含任何列表

我总能找到一些接近的东西，但从来没有我理解的东西，是否有一个真正简化的版本供不精通 javascript 的人使用？

Answer 1

如果您真的不能使用服务器端语言（也许如果您希望静态托管它），并且不希望手动设置链接的麻烦，我建议您使用静态站点生成器喜欢Jekyll。如果你确定你想要一个 JS 解决方案，这应该可以工作：

// Get current page url, remove the `.html` extension and split by underscore.
// The current page number will be the last element in the returned array.
var urlFrags = window.location.href.replace(".html", "").split("_"),
    // Get the last element of the `urlFrags` array and parse. This should be the current page number.
    curPage = parseInt(urlFrags[urlFrags.length - 1]),
    // Form the url of the expected next page. (Current page number + 1.)
    nextPage = "example_" + (curPage + 1) + ".html";

// Check if a page on this domain exists.
// Success returns true, error returns false.
function pageExists(url, callback){
    $.ajax({
        url: url,
        type: "HEAD",
        success: function(){ callback(true); },
        error: function(){ callback(false); }
    });
}

// Setup links for later.
var backLink, nextLink;

// Check if expected next page exists.
pageExists(nextPage, function(exists){
    if(exists){
        // If it does, set nextlink as expected next page.
        nextLink = nextPage;
    } else {
        // Otherwise, loop back to the start.
        nextLink = "example_1.html";
    }
});

if(curPage > 1){
    // We know the previous page must exist, so long as you're not on the first page.
    backLink = "example_" + (curPage - 1) + ".html";

    // It's not practical to try and loop back to the end if you go back on the first page.
    // You'd have to query pages until you got an error. So just leave it undefined, and ideally remove the button.
}

// Example button settings, using jQuery. Replace with whatever you're using.
$("#back").prop("href", backLink);
$("#next").prop("href", nextLink);

如果不设置相同的站点，显然无法测试所有这些，因此请原谅任何错误；）