Предыдущая Следующая Кнопки в JQuery - PullRequest
Новая
       34

Предыдущая Следующая Кнопки в JQuery

0 голосов
/ 09 декабря 2018

Я пытаюсь сделать предыдущую и следующую кнопки для просмотра этого 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.Я новичок в этом, поэтому я пытаюсь дать всю информацию, что могу.

Большое спасибо заранее.

Веб-страница

Ответы [ 2 ]

0 голосов
/ 09 декабря 2018

Вместо этого используйте 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("");).

0 голосов
/ 09 декабря 2018

Если страница более статическая, вы можете сделать что-то вроде: 

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>

Так что, надеюсь, это поможет ответить на ваш пост, но я думаю, что это тожетоже открывает банку с червями.

...