实现上一页和下一页逻辑的最佳方法是什么答案

【问题标题】：What is the best way to implement previous and next page logic实现上一页和下一页逻辑的最佳方法是什么
【发布时间】：2015-10-02 05:08:57
【问题描述】：

我有一个巨大的网页（6 页长）。为了使其更加用户友好，我决定将其分解为不同的部分（div 标签）。我在页面上放置了上一个和下一个按钮。在上一次单击时，它应该显示我所在的上一个 div 标签，下一个应该显示下一个 div 标签。我想知道实现它的最佳方法是什么？到目前为止，我有这个函数，我知道它是为名为 GeneralSection 的 div 标签硬编码的。就像 GeneralSection 一样，我还有 20 个以上的部分。有什么想法我应该怎么做？帮助表示赞赏！ :)

$(document).ready(function () {
    $("#imgNext").click(function () {
     $("#GeneralSection").hide();                
    });
});

【问题讨论】：

如果你给 div 提供唯一的 id，但像 part-1、part-2 等相关，你可以遍历它们
也许更好的解决方案是让用户能够随时保存页面 - 并且能够返回到它。

标签： javascript jquery html pagination jquery-pagination

【解决方案1】：

给每个部分类 pages 和每个部分 ids page-1, page-2 这样

$(document).ready(function () {
    var pages = $(".pages").length;
    $("#imgNext").click(function () {
      var nextPageNo = parseInt($(".pages:visible")[0].id.split('-')[1])+1;
      if(nextPageNo > pages)
             return false;
      $(".pages:visible").fadeout();
      $("#page-"+nextPageNo).fadeIn();                
    });
});

尚未完全测试，但这应该可以帮助您。

更新

HTML

<div id="container">
    <div id="page-1" class="pages">1</div>   
    <div id="page-2" class="pages">2</div> 
    <div id="page-3" class="pages">3</div> 
    <div id="page-4" class="pages">4</div> 
    <div id="page-5" class="pages">5</div> 
    <div id="page-6" class="pages">6</div> 
</div>

CSS

.pages{
 display: none;
}
#page-1{
 display: block;
}

【讨论】：

如何分配部分类页面 id ？那会是aspx页面吗？

【解决方案2】：

您可以只遍历一个元素数组。

这是一个简单的 JSBin，应该可以帮助您：https://jsbin.com/siyutumizo/edit?html,js,output

$(document).ready(function() {
  var $steps = $('.step');
  var currentStep = 0,
      nextStep;
  
  $steps.slice(1).hide(); //hide all but first
  
  $('#next').on('click', function(e) {
    e.preventDefault();
    
    nextStep = currentStep + 1;
    if (nextStep == $steps.length) {
      alert("You reached the end");
      return;
    }
    $($steps.get(currentStep)).hide();
    $($steps.get(nextStep)).show();
    currentStep = nextStep;
  });
});

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="wizard">
    <div class="step">1</div>   
    <div class="step">2</div> 
    <div class="step">3</div> 
    <div class="step">4</div> 
    <div class="step">5</div> 
    <div class="step">6</div> 
  </div>
  <button id="next">Next</button>
</body>
</html>

【讨论】：

【解决方案3】：

另一种实现方式是通过兄弟姐妹。

Jsbin：https://jsbin.com/tarajuyusu/edit?html,js,output

$(function() {
  $('div#GeneralSection').slice(1).hide(); // hide all section, except for first one
  $('#imgNext').on('click', function() {
    var section = $('div#GeneralSection').filter(':visible');
    if ($(section[0].nextElementSibling).attr('id') != "GeneralSection")
      return;
    section.hide();
    $(section[0].nextElementSibling).show();
  });

  $('#imgPrev').on('click', function() {
    var section = $('div#GeneralSection').filter(':visible');
    if ($(section[0].previousElementSibling).attr('id') != "GeneralSection")
      return;
    section.hide();
    $(section[0].previousElementSibling).show();
  });
});

【讨论】：