如何创建jquery上一个和下一个按钮，这些按钮遍历数组中的URL（分页）

I have an array of URLs, say

我说有一系列的网址

pageList = ["index.html", "01.html", "02.html"]

and I want to create a function in which .prev and .next go to the previous/next item in that array, so if I'm in index.html, clicking next will go to "01.html", and if i'm in "01.html" it'll go to "02.html" and so on.

我想创建一个函数，其中.prev和.next转到该数组中的上一个/下一个项目，所以如果我在index.html中，单击next将转到“01.html”，如果我'在“01.html”中，它将转到“02.html”，依此类推。

How could I do that? I have found many "pagination" jquery plugins, but they all seem to paginate through divs in the same URL, but I need something that actually goes to another page, something like

我怎么能这样做？我发现了许多“分页”jquery插件，但它们似乎都在同一个URL中通过div进行分页，但是我需要一些实际上转到另一个页面的东西，比如

window.location = currentLocation + 1

Sorry for the noob question, it really comes from a noob. Ta!

对不起这个菜鸟问题，它真的来自一个菜鸟。 TA！

3 个解决方案

#1

You could do it that way:

你可以这样做：

var pageList = ["index.html", "01.html", "02.html"];
var url = window.location.pathname; // e.g. http://me.com/index.html
var page = url.substring(url.lastIndexOf('/')+1); // e.g. index.html
var currentPosition = pageList.indexOf(page); // e.g. 0, 1 or 2

document.getElementById('next-btn').onclick = function(){
    // if the URL is not in the list, do nothing
    if(currentPosition==-1) return;
    // if we're at the end, go back to index, else, go to next page
    window.location = currentPosition<pageList.length-1? pageList[++currentPosition]:pageList[0];
}

Insert that script on every page and it should work if you have an element with the ID next-btn to click on.

在每个页面上插入该脚本，如果您有一个ID为next-btn的元素，则它应该可以工作。

If you are not familiar with the last line's syntax, it could also be written that way:

如果您不熟悉最后一行的语法，也可以这样编写：

if(currentPosition<pageList.length-1) {window.location = pageList[++currentPosition];}
else {window.location = pageList[0];}

#2

You could use an IFrame and have your Next Prev buttons functions set the source of the IFrame from your Array.

您可以使用IFrame并使用Next Prev按钮功能从Array中设置IFrame的源。

#3

Make sure pageList array is in the global scope. Or you can pass it as the second parameter. Depending on where that array is stored. Set next to true if it's next, set it to false if it's prev.

确保pageList数组位于全局范围内。或者您可以将其作为第二个参数传递。取决于存储阵列的位置。如果是下一个，则设置为true，如果是prev，则将其设置为false。

var pageList = ["index.html", "01.html", "02.html"];

function getUrl(next) { //next = true or false
    current = window.location;
    index = (next) ? 1 : -1;
    for(i = 0;i < pageList.length;i++) {
        if(current.toString().indexOf(pageList[i]) > -1) {
            return (pageList[i + index]);
        }
    }
}

var nextUrl = getUrl(true);
var prevUrl = getUrl(false);

#1