JavaScript:返回/前进的基本功能

JavaScript: Basic function to go back/forward

本文关键字：功能 返回 JavaScript      更新时间：2023-11-10

所以，我做了一个JavaScript函数，它帮助我定义了几个最初隐藏但在点击链接时可以显示的部分（我很难解释，sry…当你看代码片段时，你会明白我的意思）

当时我的想法是制作一个函数，显示下一个"页面"（将id提高1），另一个函数返回一个"页"（可以说，将id减少1）。

这是JS和HTML代码：

function change_page (id) {
	var content_raw = document.getElementById(id);
	var content = content_raw.innerHTML;
	var display = document.getElementById('replace');
	display.innerHTML = content;
}
function page_back () {
	//function to go one page back
}
function page_forward () {
	//function to go one page forward
}
<div id='replace'>
This is page 1 (shown by default)
</div>
<div style='display:none;'>
	<p id="1">This is page 1</p>
	<p id="2">This is page 2</p>
	<p id="3">This is page 3</p>
	<p id="4">This is page 4</p>
	<p id="5">This is page 5</p>
</div>
<p style="text-align:center; width:100%;">
	<a href="javascript:page_back()" style="float:left; margin-left:100px;">Back</a>
		<a href="javascript:change_page('1')">Page 1</a> |
		<a href="javascript:change_page('2')">Page 2</a> |
		<a href="javascript:change_page('3')">Page 3</a> |
		<a href="javascript:change_page('4')">Page 4</a> |
		<a href="javascript:change_page('5')">Page 5</a>
	<a href="javascript:page_forward()" style="float:right; margin-right:100px;">Forward</a>
</p>

我真的希望你们能帮助我，因为尽管我可以用PHP很好地编程，但我几乎不能用JS。

创建辅助变量

var currentPage = 1;

然后，在change_page函数中，您将始终更新此值

function change_page (id) {
    currentPage = id;
    ...

page_back/page_forward将调用change_page函数，其值为currentPage的增加值或减少值。所以page_back可能看起来像这个

function page_back() {
    change_page(currentPage - 1);
}

最后，您需要确保page_back和page_forward永远不会导致试图加载低于实际页数1/的页面。为了确保这一点，在change_page函数中，您可以检查id是否不小于1，同时是否小于最大页数。支票可能看起来像

function change_page (id) {
    if (id < 1 || id > 5)
        return;
    currentPage = id;
    ...

只需创建一个全局变量来存储当前页面。

function change_page (id) {
_currentPage = id;
var content_raw = document.getElementById(_currentPage);
var content = content_raw.innerHTML;
var display = document.getElementById('replace');
display.innerHTML = content;
}
function page_back () {
change_page(_currentPage-1);
}
function page_forward () {
change_page(_currentPage+1);
}
// global variable
var _currentPage;
<div id='replace'>
This is page 1 (shown by default)
</div>
<div style='display:none;'>
<p id="1">This is page 1</p>
<p id="2">This is page 2</p>
<p id="3">This is page 3</p>
<p id="4">This is page 4</p>
<p id="5">This is page 5</p>
</div>
<p style="text-align:center; width:100%;">
<a href="javascript:page_back()" style="float:left; margin-left:100px;">Back</a>
	<a href="javascript:change_page('1')">Page 1</a> |
	<a href="javascript:change_page('2')">Page 2</a> |
	<a href="javascript:change_page('3')">Page 3</a> |
	<a href="javascript:change_page('4')">Page 4</a> |
	<a href="javascript:change_page('5')">Page 5</a>
<a href="javascript:page_forward()" style="float:right; margin-right:100px;">Forward</a>
</p>

尝试此代码

在此处使用JSFIDDLE

var curPage = 0;
function change_page (id) {
	var content_raw = document.getElementById(id);
    curPage = parseInt(id);
	var content = content_raw.innerHTML;
	var display = document.getElementById('replace');
	display.innerHTML = content;
}
function page_back () {
	//function to go one page back
    if(curPage==1)
        return;
    var content_raw = document.getElementById(curPage-1);
    curPage = curPage-1;
	var content = content_raw.innerHTML;
	var display = document.getElementById('replace');
	display.innerHTML = content;
}
function page_forward () {
	 if(curPage==5)
        return;
    var content_raw = document.getElementById(curPage+1);
    curPage = curPage+1;
	var content = content_raw.innerHTML;
	var display = document.getElementById('replace');
	display.innerHTML = content;
}
<div id='replace'>
This is page 1 (shown by default)
</div>
<div style='display:none;'>
	<p id="1">This is pagse 1</p>
	<p id="2">This is paage 2</p>
	<p id="3">This is page 3</p>
	<p id="4">This is page 4</p>
	<p id="5">This is page 5</p>
</div>
<p style="text-align:center; width:100%;">
	<a href="javascript:page_back()" style="float:left; margin-left:100px;">Back</a>
		<a href="javascript:change_page('1')">Page 1</a> |
		<a href="javascript:change_page('2')">Page 2</a> |
		<a href="javascript:change_page('3')">Page 3</a> |
		<a href="javascript:change_page('4')">Page 4</a> |
		<a href="javascript:change_page('5')">Page 5</a>
	<a href="javascript:page_forward()" style="float:right; margin-right:100px;">Forward</a>
</p>

在此处进行演示

相关文章：