javascript - 虚拟 "Back Button"jquery

Question

我正在创建一个移动网络应用程序，我有一个登录/注册页面，用户可以在其中选择他们想要的方法。 为了降低页面的刷新率，我根据用户使用 jquery 单击的内容隐藏和显示对象。

我在每个“页面”上都有虚拟后退按钮，它们隐藏/显示对象，包括后退按钮本身，每次我需要添加额外的“页面”时，我都必须添加并调用不同的按钮。

有没有一种方法可以让我拥有一个按钮并根据隐藏/显示的元素来使用它？

例如

html

<div id="go_button"</div>
<div id="next_button"</div
<div id="backbutton1"</div>
<div id="backbutton2"</div>


<div id="page1"
   <p> some information here </p>
</div>

<div id="page2"
   <p> some more information here </p>
</div>

jQuery

$("#gobutton").click(function(){
     $('#backbutton1').fadeIn(250);
     $('#page1').fadeIn(250);
     $('#next_button').fadeIn(250);
});

$('#next_button').click(function(){
     $('#backbutton1').hide();
     $('#backbutton2').show();
     $('#page1').fadeOut(250);
     $('#page2').fadeIn(250);
     $('#next_button').fadeOut(250);


$("#backbutton1").click(function(){
     $('#backbutton1').fadeOut(250);
     $('#page1').fadeOut(250);
     $('#next_button').fadeOut(250);
});


etc etc 

Answer 1

这样的东西对你有用吗？

我检查了当前可见的页面，并根据该页面和单击的按钮，它将前进或后退。

var
  $go = $('#go_button'),
  $next = $('#next_button'),
  $back = $('#backbutton'),
  $pages = $('div[id^=page]');

$go.click(function() {
  $next.fadeIn(250);
  $back.fadeIn(250);
  $pages.first().fadeIn(250);
});

$next.click(function() {
  var $current = $pages.filter(':visible'); // Get currently visible page

  if (!$current.is($pages.last())) { // If this is not the last page, do something
    $current
      .hide() // hide current page
      .next() // get next page
      .fadeIn(250); // fade in next page
  }
});

// Opposite of the $next.click
$back.click(function() {
  var $current = $pages.filter(':visible');

  if (!$current.is($pages.first())) {
    $current
      .hide()
      .prev()
      .fadeIn(250);
  }
});

div[id^=page] {
  padding: 5px 10px;
  border: 1px solid #ddd;
  display: none;
}

#next_button,
#backbutton {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="go_button">go</button>
<button id="next_button">next</button>
<button id="backbutton">back</button>

<div id="page1">
  <p> 1 some information here </p>
</div>
<div id="page2">
  <p> 2 some more information here </p>
</div>
<div id="page3">
  <p> 3 more information here </p>
</div>
<div id="page4">
  <p> 4 more! more! more! more!</p>
</div>