基于另一个对象键/值存储对象值

Question

我有一个网站，其内容类似于一本书，第一页显示在上一页的旁边。把它看作是一本书的前后页翻页。它不是浏览器中的上一页，它在页面内。就像你正在改变书中的页面

我想动态分配上一页和下一页按钮的链接。目前页面位于一个对象中，pageNum和fileName作为键

我想根据当前页面链接的页码设置上一个链接。请参阅下面的示例和代码。

var toc = [ 
 
    {"pageNum": "1", "fileName": "index.html"}, 
 
    {"pageNum": "2", "fileName": "about.html"}, 
 
    {"pageNum": "3", "fileName": "work.html"}, 
 
    {"pageNum": "4", "fileName": "blog.html"}, 
 
    {"pageNum": "5", "fileName": "contact.html"}, 
 
    ]; 
 
    
 
var url = window.location.pathname; 
 
var currentPage = url.substring(url.lastIndexOf('/')+1); 
 
    
 
var prevPageNum; 
 
var prevPage; 
 
    
 
//Based on currentPage, find object entry in toc and apply related pageNum 
 
toc.filter(function(toc){ 
 
    if(toc.fileName == currentPage) { 
 
    $('#currentPageNumber').append(toc.pageNum); 
 
    } 
 
}); 
 
    
 
    /******* Last and Next Page Assignment *******/ 
 

 
toc.filter(function(toc){ 
 
    if(toc.fileName == currentPage) { 
 
    prevPageNum = toc.pageNum-1; 
 
    prevPage = toc.fileName; 
 
    
 
    $('#prevPage').append(prevPage); 
 
    //final code 
 
    //$('#prevPage').attr("href",prevPage); 
 
    } 
 
});

<a href="#" id="prevPage">Previous Page</a> 
 
<a href="#" id="nextPage">Next Page</a>

例：

当前页是about.html prevPage必须的index.html

Answer 1

如何只定位到新的URL在点击处理器：

$('#prevPage').click(function() { 
    window.location.href = prevPage; 
}); 

Answer 2

对我来说，看起来你想创建一个single page web application，有很多框架是值得使用的。

要回答实际问题，也许你可以加载一个页面中的所有元素，并隐藏 - 取消隐藏它们。

$(document).ready(function(){ 
 
\t $(".content").css("display","none"); 
 
\t var currentPage = 1; 
 
     $("#block" + currentPage).css("display","block"); 
 
\t $("#prev").click(function(){ 
 
\t \t $(".content").css("display","none"); 
 
\t \t currentPage--; 
 
     if(currentPage == 0) currentPage = 2; 
 
\t \t $("#block" + currentPage).css("display","block"); 
 
\t }); 
 
\t $("#next").click(function(){ 
 
\t \t $(".content").css("display","none"); 
 
\t \t currentPage++; 
 
     if(currentPage == 3) currentPage = 1; 
 
\t \t $("#block" + currentPage).css("display","block"); 
 
\t }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href = "#" id = "prev"> Previus</a> 
 
<a href = "#" id = "next"> Next</a> 
 
<div id = "block1" class = "content"> 
 
This is home page 
 
</div> 
 
<div id = "block2" class = "content"> 
 
This is about page 
 
</div>