Question

我正在尝试将用于查看此pdf的上一个和下一个按钮转换为html。我认为我应该跳到下一个锚点，因为每个页面都有这样写的自己的锚点：

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

但是，当我使用$(location).attr('pathname');时无论正在查看什么页面，我都将得到“ /ArduinoHtml.html”，因此无法像我正在考虑的那样减去和加1。下面是我到的地方以及我拥有的文件。

<!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>

这是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>

这是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/>

下面是打开ArduinoHtml.html的图像。我是新来的，所以我想尽我所能提供所有信息。

非常感谢您。

Webpage

Answer 1

如果页面更加静态，则可以执行以下操作：

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

如果页面的静态性较差，您仍然可以使用许多未经测试的代码。微小的区别：

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

我怀疑此代码无法立即生效。正如您所描述的那样，很难理解每个页面的关系。我怀疑您想在ArduinoHtml.html中使用此代码，但是由于该页面只是框架集页面，因此我不知道您的按钮将位于何处，并且我怀疑您最终将不得不制作一个新框架来包含HTML为您的按钮。

如果您决定创建一个框架来包含按钮，那么代码会稍微复杂一些：

<!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>

因此希望这有助于回答您的帖子，但我认为它也可以为您打开一罐蠕虫。

Answer 2

改为使用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("");
});

看起来很复杂，但这是它的作用：

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

这将获取当前路径（window.location.href），使其成为数组.split("")，获取最后一个字符（数字）（[window.location.href.length - 1]）并减去1（-1; ）。 Next按钮的操作与之相同，只是它是加而不是减。

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

这将使当前URL（window.location.href）等于当前URL（window.location.href），将其转换为数组（.split("")），并删除最后一个字符（数字）（.pop()），将新数字添加到末尾（.push(nextPage)）并将其变回字符串（.join("");）。

JQuery中的上一个下一个按钮

2 个答案: