虛擬「後退按鈕」jquery

我正在創建一個移動web應用程序，我有一個登錄/註冊頁面，用戶可以選擇他們想要的方法。爲了減少我隱藏和顯示對象的頁面的刷新率，這取決於用戶用jquery點擊的內容。虛擬「後退按鈕」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

來源

2016-09-27 Corey Child

會是這樣的工作嗎？

我檢查了當前可見的頁面，並基於該頁面以及點擊哪個按鈕，它會前進或後退。

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>

來源

2016-09-27 05:17:08 KiiroSora09

這是非常完美的，感謝您的幫助！ –

樂於助人！儘管請檢查您提供的語法錯誤代碼（您的html中標籤不完整），以便人們更容易幫助您。 – KiiroSora09

做一個功能..

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

來源

2016-09-27 05:02:35

虛擬「後退按鈕」jquery

回答

相關問題