Member 12631714 Ответов: 1

Создание навигации по следующей / предыдущей HTML-странице с помощью jquery


У меня есть серия страниц под названием "Страница-1", "Страница-2", "Страница-3"... "страница-99" и т. д. Я пытаюсь создать навигацию таким образом, чтобы всякий раз, когда я нажимаю кнопку "Далее", она переходила на следующую страницу, а если я нажимаю "предыдущая", она переходила на предыдущую страницу в зависимости от текущего номера страницы.

У меня есть HTML:
<a href="#" id="next">next</a> <!--it will go to page-3-->
<a href="#" id="prev">previous</a> <!--it will go to page-1-->


и код jQuery (от Stackoverflow.com):
// Check that a resource exists at url; if so, execute callback
function checkResource(url, callback){
    var check = new XMLHttpRequest();
    check.addEventListener("load", function(e){
        if (check.status===200) callback();
    });
    check.open("HEAD",url);
    check.send();
}

// Get next or previous path
function makePath(sign){
    // location.pathname gets/sets the browser's current page
    return location.pathname.replace(
        // Regular expression to extract page number
        /(\/page\-)(\d+)/,
        function(match, base, num) {
            // Function to increment/decrement the page number
            return base + (parseInt(num)+sign);
        }
    );
}
function navigate(path){ location.pathname = path; }

var nextPath = makePath(1), prevPath = makePath(-1);

checkResource(nextPath, function(){
    // If resource exists at nextPath, add the click listener
    document.getElementById('next')
        .addEventListener('click', navigate.bind(null, nextPath));
});
checkResource(prevPath, function(){
    // If resource exists at prevPath, add the click listener
    document.getElementById('prev')
        .addEventListener('click', navigate.bind(null, prevPath));
});


По какой-то причине код не работает в Chrome и частично работает в Mozilla. Я очень новичок в jQuery и пытаюсь понять, почему он не работает, когда я его реализую. Есть идеи ?

Спасибо

Что я уже пробовал:

Я пытался это исправить, но я очень новичок в jQuery, и мне трудно понять эту проблему.

1 Ответов

Рейтинг:
2

Karthik_Mahalingam

попробовать это

var pageNamePattern = 'page'; // define the pattern of the html page name (http://www....../HtmlPage1.html)
       var firstPage = 1, lastPage = 10; // initialise the starting and ending page

       $(function () {
           var next = GetNextPageNumber();
           var nexturl = pageNamePattern + next + '.html';
           var prev = GetPrevPageNumber();
           var prevurl = pageNamePattern + prev + '.html';
           //$('#next').click(function () { window.location =nexturl });
           //$('#prev').click(function () { window.location = prevurl });

           $('#next').attr('href', nexturl);
           $('#prev').attr('href', prevurl);

       });

       function GetCurrentPageNumber() {
           debugger
           var path = window.location.pathname;
           var page = path.split("/").pop();
           page = page.replace(pageNamePattern, '').replace('.html', '').replace('#', '');
           return parseInt(page);
       }
       function GetNextPageNumber() {
           var current = GetCurrentPageNumber();
           current++;
           if (current > lastPage) // if last page, then dont increment the counter, either stay in same page or navigate to very fist page.
               current = lastPage;
           return current;
       }
       function GetPrevPageNumber() {
           var current = GetCurrentPageNumber();
           current--;
           if (current < firstPage) // if last page, then dont increment the counter, either stay in same page or navigate to very fist page.
               current = firstPage;
           return current;
       }