[英]Previous Next Buttons in JQuery
我正在尝试将用于查看此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">« Previous</a>
<a href="#" class="next">Next »</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的样子的图像。 我对此并不陌生,所以我想提供所有可能的信息。
提前非常感谢您。
如果页面更静态,则可以执行以下操作:
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">« Previous</a>
<a href="#" class="next">Next »</a>
</body>
</html>
因此,希望这有助于回答您的帖子,但我认为它也为您打开了一罐蠕虫。
使用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("");
)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.