首先，我不是开发人员。我已经完成了Odin项目的一半，已经介绍了一些HTML和CSS，但还没有开始使用JS。为了帮助我学习，我创建了自己的博客。我的目标是让每一篇博客文章都有自己的样式表(所以通过每一篇新文章，我学到了更多关于CSS的知识(。
无论如何，我计划写一篇关于使用电子书阅读器，特别是Kindle的好处的文章。我把这个页面设计成了Kindle绿洲的样子，我希望读者能够通过Kindle的下一个/上一个按钮浏览文章内容，但由于我不是开发人员，这就是我的困境。通过堆栈溢出，我设法添加了一些JS，这些JS将通过每个潜水元素的专用按钮显示第1、2和3页，但是，我真正需要的是通过上一个/下一个按钮浏览x个页面。
以下是我目前所掌握的：https://codepen.io/dbssticky/pen/yLVoORO.任何帮助都将不胜感激。当然，我应该做的是完成奥丁项目，并自己想出一个解决方案，但是，我真的很想尽早发布这篇Kindle文章。因此，我厚着脸皮请求援助。
这是我目前使用的JS：
function swapContent(id) {
const main = document.getElementById("main_place");
const div = document.getElementById(id);
const clone = div.cloneNode(true);
while (main.firstChild) main.firstChild.remove();
main.appendChild(clone);
}
您有正确的想法，只需要进行一些调整即可获得上一个/下一个功能。
目前，您的div ID遵循operation1、operation2等格式。由于您想要上一个/下一个功能，您需要将当前使用完整ID的"swapping"函数更改为仅使用数字部分。
添加一个新函数，将数字附加到"运算"中，而不是使用整个函数：
function goToPage(pageNumber){
const main = document.getElementById("main_place");
const div = document.getElementById("operation" + pageNumber);
const clone = div.cloneNode(true);
while (main.firstChild) main.firstChild.remove();
main.appendChild(clone);
}
然后将Page 1/2/3按钮更改为使用goToPage(1)、goToPage(2)等
现在，对于上一个/下一个功能，您需要一种方法来跟踪您所在的页面，以便确定要加载的页面。
在顶部添加一个变量(外部函数(
var currentPage = 0;
然后在你的goToPage函数中添加一行来跟踪你所在的页面。
currentPage = pageNumber;
现在您正在跟踪，可以添加上一个和下一个函数。
function goNextPage(){
goToPage(currentPage-1);
}
function goPreviousPage(){
goToPage(currentPage+1);
}
然后从上一个和下一个按钮调用它。
<button onClick="goNextPage()" class="next-button"></button>
<button onClick="goPreviousPage()" class="previous-button"></button>
这是一个代码笔：https://codepen.io/srirachapen/pen/WNZOXQZ
它是基本的，您可能不得不处理不存在的div ID之类的事情。
HTML
<button class="next-button" onclick="nextContent()"></button>
<button class="previous-button" onclick="prevContent()"></button>
JS-
var pageid = 0;
var maxpage = 3;
function nextContent() {
if(pageid == maxpage) return
pageid++
swapContent(`operation${pageid}`)
}
function prevContent() {
if(pageid == 1) return
pageid--
swapContent(`operation${pageid}`)
}
您可以尝试在页面之间切换。但您可能需要编辑"；swapContent"；方法更明智。
跟踪当前页面
无论你使用什么解决方案来渲染页面&链接(手动硬编码链接和内容与外部存储和自动生成(，有一件事是不可避免的：你需要跟踪当前页面！
var currentPage = 0
然后，每当发生页面更改事件时，都会更新该变量。
跟踪当前页面后，您现在可以执行与其相关的操作(例如+1或-1(
我建议制作一个执行高级分页逻辑的goToPage(page)函数，并保留专门用于交换div内容的swapContent()函数。将来，您可能会发现您希望将swapContent()用于非页面内容，例如显示"；欢迎"或"；"帮助"；屏幕
示例：
function goToPage(page) {
// Update `currentPage`
currentPage = page
// ... other logic, like a tracking event or anything else you want you occur when pages change
// Do the actual content swap, which could be your existing swapContent()
swapContent('operation'+page)
}
你可以这样调用函数：
goToPage(3) // Jump to a specific page
goToPage(currentPage + 1) // Go to the next page
goToPage(currentPage - 1) // Go to the prev page
您可以制作单独的辅助函数，如"；转到下一页(("；如果你愿意，但可以肯定的是，你首先要从一个基本的页面更改功能开始。