JQuery中的Previous Next按钮

Question

I'm trying to make previous and next buttons for viewing this pdf converted to html. 我正在尝试将用于查看此pdf的上一个和下一个按钮转换为html。 I thought I should jump to the next anchor since each page has it's own anchor written like this: 我认为我应该跳到下一个锚点，因为每个页面都有自己的锚点，如下所示：

<a href="ArduinoHtmls.html#1" target="contents" >

However when I use $(location).attr('pathname'); 但是当我使用$(location).attr('pathname'); I get "/ArduinoHtml.html" no matter what page I'm viewing, so I can't subtract and add 1 like I was thinking of doing. 无论正在查看什么页面，我都将得到“ /ArduinoHtml.html”，因此无法像我正在考虑的那样减去和加1。 Below is where I got and the files I have. 以下是我获得的位置和文件所在的位置。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".previous").click(function(){
        // Needed Code Help
    });
    $(".next").click(function(){
        // Needed Code Help
    });
});
</script>
</head>
<body>
<h2>Previous and Next Buttons</h2>
<a href="#" class="previous">&laquo; Previous</a>
<a href="#" class="next">Next &raquo;</a>
</body>
</html>

This is the ArduinoHtml.html file: 这是ArduinoHtml.html文件：

<!DOCTYPE html>
<html>
<head>
<title>Arduino and LEGO Projects</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="generator" content="pdftohtml 0.36"/>
<meta name="author" content="Jon Lazar"/>
<meta name="keywords" content="www.it-ebooks.info"/>
<meta name="date" content="2013-09-06T04:13:41+00:00"/>
<meta name="subject" content="IT eBooks"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<frameset cols="100,*">
<frame name="links" src="ArduinoHtml_ind.html"/>
<frame name="contents" src="ArduinoHtml-1.html"/>
</frameset>
</html>

This is the ArduinoHtml_ind.html file: 这是ArduinoHtml_ind.html文件：

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<title></title>
</head>
<body>
<a href="ArduinoHtmls.html#outline" target="contents">Outline</a><br/>
<a href="ArduinoHtmls.html#1" target="contents" >Page 1</a><br/>
<a href="ArduinoHtmls.html#2" target="contents" >Page 2</a><br/>
<a href="ArduinoHtmls.html#3" target="contents" >Page 3</a><br/>
<a href="ArduinoHtmls.html#4" target="contents" >Page 4</a><br/>
<a href="ArduinoHtmls.html#5" target="contents" >Page 5</a><br/>
<a href="ArduinoHtmls.html#6" target="contents" >Page 6</a><br/>
<a href="ArduinoHtmls.html#7" target="contents" >Page 7</a><br/>

Below is an image of what opening ArduinoHtml.html looks like. 下面是打开ArduinoHtml.html的样子的图像。 I'm new to this so I'm trying to give all the information I can. 我对此并不陌生，所以我想提供所有可能的信息。

Thank you very much in advance. 提前非常感谢您。

Webpage 网页

Answer 1

If the page is more static, you can do something like: 如果页面更静态，则可以执行以下操作：

var pages = 7;
var currentPage = 0;
var pageUrl = "ArduinoHtmls.html";

$(function(){
  $(".previous").click(function(e){
    e.preventDefault();
    if(currentPage == 0){
      return false;
    }
    var prevUrl = pageUrl + "#";
    if(currentPage == 1){
      prevUrl + "outline";
    } else {
      prevUrl + (--currentPage).toString();
    }
    $("frame[name='contents']").attr("src", prevUrl);
  });
  $(".next").click(function(e){
    e.preventDefault();
    if(currentPage == pages){
      return false;
    }
    var nextUrl = pageUrl + "#" + (++currentPage).toString();
    $("frame[name='contents']").attr("src", nextUrl);
  });
});

If the page is less static, you can still use a lot of this untested code. 如果页面的静态性较差，您仍然可以使用许多未经测试的代码。 One minor difference: 微小的区别：

var pages = $("a[target='contents']", window.frames[0].document).length;

I am suspicious that this code will not work right away. 我怀疑此代码不会立即生效。 It's a little hard to understand the relationship of each of the pages as you have described it. 正如您所描述的那样，很难理解每个页面的关系。 I suspect you either want this code in the ArduinoHtml.html , yet I do not know where your buttons will reside since this page is only the frameset page and I suspect you will end up having to make a new frame to contain the HTML for your buttons. 我怀疑您想要在ArduinoHtml.html使用此代码，但是我不知道您的按钮将驻留在哪里，因为此页面只是框架集页面，并且我怀疑您最终将不得不制作一个新框架来包含您的HTML纽扣。

If you decide to create a frame to contain the buttons, then the code is a little more complex: 如果决定创建一个框架来包含按钮，那么代码会稍微复杂一些：

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
  $(function(){
    var frames = window.parent.frames;
    var pages = $("a[target='contents']", frames[0].document).length;
    var currentPage = 0;
    var pageUrl = "ArduinoHtmls.html";
    var contentFrame = frames[1];

    $(".previous").click(function(e){
      e.preventDefault();
      if(currentPage == 0){
        return false;
      }
      var prevUrl = pageUrl + "#";
      if(currentPage == 1){
        prevUrl + "outline";
      } else {
        prevUrl + (--currentPage).toString();
      }
      contentFrame.location.href = prevUrl;
    });

    $(".next").click(function(e){
      e.preventDefault();
      if(currentPage == pages){
        return false;
      }
      var nextUrl = pageUrl + "#" + (++currentPage).toString();
      contentFrame.location.href = nextUrl;
    });
  });
  </script>
</head>
<body>
  <h2>Previous and Next Buttons</h2>
  <a href="#" class="previous">&laquo; Previous</a>
  <a href="#" class="next">Next &raquo;</a>
</body>
</html>

So hopefully this helps answer your post yet I think it also opens a can of worms for you too. 因此，希望这有助于回答您的帖子，但我认为它也为您打开了一罐蠕虫。

Answer 2

Use window.location.href instead: 使用window.location.href代替：

$(".previous").click(function(){
    var nextPage = Number(window.location.href.split("")[window.location.href.length - 1]) - 1;
    window.location.href = window.location.href.split("").push(nextPage).join("");
});
$(".next").click(function(){
    var nextPage = Number(window.location.href.split("")[window.location.href.length - 1]) + 1;
    window.location.href = window.location.href.split("").push(nextPage).join("");
});

Looks complicated, but here's what it does: 看起来很复杂，但这是它的作用：

var nextPage = window.location.href.split("")[window.location.href.length - 1] - 1;

This gets the current path ( window.location.href ), makes it an array .split("") , obtains the last character (the number) ( [window.location.href.length - 1] ) and subtracts 1 ( -1; ). 这将获得当前路径（ window.location.href ），使其成为数组.split("") ，获得最后一个字符（数字）（ [window.location.href.length - 1] ）并减去1（ -1; ）。 Same follows for the Next button, except it's adding rather than subtracting. Next按钮的操作与之相同，只是它是加法而不是减法。

window.location.href = window.location.href.split("").pop().push(nextPage).join("");

This makes the current URL ( window.location.href ) equal to the current URL ( window.location.href ), turns it into an array ( .split("") ), takes off the last character (the number) ( .pop() ), adds the new digit to the end ( .push(nextPage) ) and turns it back into a string ( .join(""); ). 这使当前URL（ window.location.href ）等于当前URL（ window.location.href ），将其转换为数组（ .split("") ），并.split("")最后一个字符（数字）（ .pop() ），将新数字添加到末尾（ .push(nextPage) ）并将其变回字符串（ .join(""); ）。

JQuery中的Previous Next按钮

问题描述

2 个解决方案

解决方案1
0 2018-12-09 05:43:32

解决方案2
0 2018-12-09 05:47:05

JQuery中的Previous Next按钮

问题描述

2 个解决方案

解决方案1 0 2018-12-09 05:43:32

解决方案2 0 2018-12-09 05:47:05

解决方案1
0 2018-12-09 05:43:32

解决方案2
0 2018-12-09 05:47:05