JQuery中的Previous Next按鈕

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的樣子的圖像。 我對此並不陌生，所以我想提供所有可能的信息。

提前非常感謝您。

網頁

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("") ），並.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