Question

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

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

Answer 1

你可以遍历一系列元素。

这是一个简单的JSBin应该让你前进：https://jsbin.com/siyutumizo/edit?html,js,output

＆＃13;

$(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;
  });
});

＆＃13;

<!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>

＆＃13;

Answer 2

实现这一目标的另一种方式是通过兄弟姐妹。

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();
  });
});

Answer 3

为每个部分分类pages和每个部分ID 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;
}

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

3 个答案: