Virtual "Zurück Button" jquery

Question

Ich erstelle eine mobile Web-App, ich habe eine Login/Anmeldeseite, wo Benutzer die gewünschte Methode wählen können. Um die Aktualisierungsrate von Seiten zu reduzieren, blende ich Objekte aus und zeige sie an, je nachdem, worauf der Benutzer mit jquery klickt.

Ich habe virtuelle Zurück-Schaltflächen auf jeder der 'Seiten', die die Objekte einschließlich der Zurück-Schaltflächen selbst zeigen, jedes Mal, wenn ich eine zusätzliche 'Seite' hinzufügen muss, die ich hinzufügen und die verschiedenen Schaltflächen aufrufen muss.

Gibt es einen Weg, ich kann einen Knopf haben und verwenden, je nachdem welche Elemente sind versteckt/gezeigt?

beispiels

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

Würde so etwas für Sie funktionieren?

Ich überprüfte die aktuell sichtbare Seite, und basierend darauf und welche Schaltfläche geklickt wird, würde es vorwärts oder rückwärts gehen.

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>

Answer 2

eine Funktion Make ..

function operation(name){ 

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

jetzt in html

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