Сохранение значения объекта на основе другого ключа объекта/значения

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>

Пример:

CurrentPage является about.html prevPage должен быть index.html

Answer 1

Как насчет навигации на новый адрес в обработчик кликов:

$('#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>