Question

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

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

我有没有办法让一个按钮使用它，具体取决于隐藏/显示的元素？

e.g

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

这样的事情对你有用吗？

我检查了当前可见的页面，并根据该页面点击了什么按钮，它会前进或后退。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

制作一个功能..

    function operation(name){

    if(name == "go_button"){
     //operation
    }else if(name == "next_button"){
     //do this.
    } 
 }

现在在html中

<div id="go_button" onclick="operation('go_button')" > </div>
<div id="next_button" onclick="operation('next_button')" ></div

虚拟“后退按钮”jquery

2 个答案: