如何创建遍历数组中URL的jQuery上一个和下一个按钮(分页)

烦恼者

我有一组网址,例如

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

并且我想创建一个函数,其中.prev和.next转到该数组中的上一个/下一个项目,因此如果我在index.html中,则单击“下一步”将转到“ 01.html”,如果我m在“ 01.html”中将转到“ 02.html”,依此类推。

我该怎么办?我发现了许多“分页” jquery插件,但它们似乎都可以通过同一URL中的div分页,但是我需要一些实际上可以转到另一个页面的东西,例如

window.location = currentLocation + 1

很抱歉菜鸟问题,它确实来自菜鸟。

布莱克斯

您可以这样操作:

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];
}

在每个页面上插入该脚本,如果next-btn要单击ID的元素,它应该可以工作

如果您不熟悉最后一行的语法,也可以这样写:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何创建遍历数组中URL的jquery上一个和下一个按钮(分页)

来自分类Dev

分页-jQuery DataTables中的上一个和下一个大小按钮

来自分类Dev

jQuery分页的下一个和上一个按钮不起作用

来自分类Dev

如何给分页的上一个和下一个按钮?

来自分类Dev

如何使我的“上一个”和“下一个”按钮在分页上工作?

来自分类Dev

如何使用“下一个”和“上一个”按钮代替list.js分页中的数字?

来自分类Dev

如何从 twbs 分页插件中删除“第一个”、“上一个”、“下一个”和“最后一个”按钮

来自分类Dev

创建自定义分页,但是“下一个”和“上一个”按钮不起作用

来自分类Dev

Java Swing-如何使下一个和上一个按钮显示数组中对象的变量?

来自分类Dev

如何使用按钮调用数组中的下一个和上一个值?

来自分类Dev

WordPress链接分页仅显示下一个和上一个按钮

来自分类Dev

如何获取数组中的下一个和上一个元素,Ruby

来自分类Dev

使用下一个和上一个按钮循环遍历li元素

来自分类Dev

如何用成角度的图像替换分页的上一个和下一个按钮?

来自分类Dev

分页表tr添加上一个和下一个jquery

来自分类Dev

如何为该滑块添加下一个和上一个按钮,而不是data-link =“ n”(删除分页并仅添加下一个和上一个按钮)

来自分类Dev

如何使用Jquery each()方法遍历列表中的下一个/上一个3个元素

来自分类Dev

分页下一个上一个

来自分类Dev

如何在 DataTable 分页中添加“上一个”和“下一个”按钮以及“列表框”

来自分类Dev

jQuery的下一个和上一个按钮

来自分类Dev

如何在保留页面内容的同时创建上一个和下一个按钮

来自分类Dev

如何在滑块中不显示上一个按钮和下一个按钮?

来自分类Dev

PDO分页逐行,卡在下一个按钮和上一个按钮上

来自分类Dev

如何添加下一个和上一个按钮弹出?

来自分类Dev

colorbox:如何禁用下一个和上一个按钮

来自分类Dev

如何向 ListView 添加上一个和下一个按钮

来自分类Dev

jQuery,Bootstrap导航-如何添加上一个/下一个按钮?

来自分类Dev

FullCalendar中的“上一个”和“下一个”按钮产生“关闭”消息

来自分类Dev

更改datepicker插件中的下一个和上一个按钮的位置

Related 相关文章

  1. 1

    如何创建遍历数组中URL的jquery上一个和下一个按钮(分页)

  2. 2

    分页-jQuery DataTables中的上一个和下一个大小按钮

  3. 3

    jQuery分页的下一个和上一个按钮不起作用

  4. 4

    如何给分页的上一个和下一个按钮?

  5. 5

    如何使我的“上一个”和“下一个”按钮在分页上工作?

  6. 6

    如何使用“下一个”和“上一个”按钮代替list.js分页中的数字?

  7. 7

    如何从 twbs 分页插件中删除“第一个”、“上一个”、“下一个”和“最后一个”按钮

  8. 8

    创建自定义分页,但是“下一个”和“上一个”按钮不起作用

  9. 9

    Java Swing-如何使下一个和上一个按钮显示数组中对象的变量?

  10. 10

    如何使用按钮调用数组中的下一个和上一个值?

  11. 11

    WordPress链接分页仅显示下一个和上一个按钮

  12. 12

    如何获取数组中的下一个和上一个元素,Ruby

  13. 13

    使用下一个和上一个按钮循环遍历li元素

  14. 14

    如何用成角度的图像替换分页的上一个和下一个按钮?

  15. 15

    分页表tr添加上一个和下一个jquery

  16. 16

    如何为该滑块添加下一个和上一个按钮,而不是data-link =“ n”(删除分页并仅添加下一个和上一个按钮)

  17. 17

    如何使用Jquery each()方法遍历列表中的下一个/上一个3个元素

  18. 18

    分页下一个上一个

  19. 19

    如何在 DataTable 分页中添加“上一个”和“下一个”按钮以及“列表框”

  20. 20

    jQuery的下一个和上一个按钮

  21. 21

    如何在保留页面内容的同时创建上一个和下一个按钮

  22. 22

    如何在滑块中不显示上一个按钮和下一个按钮?

  23. 23

    PDO分页逐行,卡在下一个按钮和上一个按钮上

  24. 24

    如何添加下一个和上一个按钮弹出?

  25. 25

    colorbox:如何禁用下一个和上一个按钮

  26. 26

    如何向 ListView 添加上一个和下一个按钮

  27. 27

    jQuery,Bootstrap导航-如何添加上一个/下一个按钮?

  28. 28

    FullCalendar中的“上一个”和“下一个”按钮产生“关闭”消息

  29. 29

    更改datepicker插件中的下一个和上一个按钮的位置

热门标签

归档