javascript - 在已加载内容等的 div 中加载内容

Question

我有 14 页，例如第 1 页、第 2 页、第 3 页、第 4 页、第 5 页、第 6 页。现在默认通过加载加载第 1 页。 page1 有加载下一页的链接。在第 2 页上，它具有返回第 1 页并移至下一页第 4 页的链接，无需刷新即可加载等。

所以现在我需要一个代码用于每个加载的下一个和上一个链接，我还有第 10 页，它有所有加载页面的链接，它也应该被加载。 我用于加载的代码。但它最多只能工作 2 个负载。我需要通过所有页面加载下一个和上一个链接，并为所有链接加载一个页面。我已经准备好 html 和 css，需要 js 方面的帮助。谢谢

 $(function(){
      $('.modal-body').load('pages/page1.html', function(){
        //load your second set of html here with another load.
        $('.changed').click(function(){
             var page = $(".changed").attr('href');
            console.log(page);
            var loaded = $('.modal-body').load('pages/' + page + '.html');
            return false;
          });
    });

    });

每个加载的页面都有类似的链接

<a href="changed">Next</a>

如有任何帮助，我们将不胜感激。我已经有一个导航在加载的内容之外工作。但我也需要在每个新加载的页面中进行导航。

Answer 1

您可以在 Javascript 中放置一个页面计数器。而且您可以使用事件委托(delegate)，这样您就不需要在每次重新加载正文时都绑定(bind)新的处理程序。

$(function(){
  $('.modal-body').load('pages/page1.html'); // Load page 1 at start
  var curPage = 1;
  $(document).on("click", ".nextpage", function() {
    curPage++;
    $('.modal-body').load('pages/page' + curPage + '.html');
    return false;
  });
  $(document).on("click", ".prevpage", function() {
    curPage--;
    $('.modal-body').load('pages/page' + curPage + '.html');
    return false;
  });
});

HTML 应该有:

<a class="prevpage" href="#">Previous</a> <a class="nextpage" href="#">Next</a>