2017-12-16 1 views
1

Ich habe eine Struktur meiner HTML-Code wie folgt aus:Holen Sie sich das nächste (nicht immediatelly) Element in jquery

<!-- First Step --> 
<fieldset> 
    <div> 
     <input type="text" name="username" /> 
    </div> 
    <input type="button" name="next" value="Next" /> 
</fieldset> 
<!-- Second Step --> 
<fieldset> 
    <div> 
     <input type="password" name="password" /> 
    </div> 
    <input type="button" name="next" value="Next" /> 
</fieldset> 

ich das tun wollte, wenn ein Benutzer drücken Sie die Eingabetaste und das Feld wird ausgewählt, es drücken automatisch die nächste Eingabe, und ich mache diesen jQuery-Code:

$('input[name="username"], input[name="password"]').keypress(function (e) { 
    var key = e.which; 
    if (key == 13) { 
     $('input[name="next"]').click(); 
     return false; 
    } 
}); 

Es funktioniert, aber nur, wenn der Benutzer drückt im ersten Schritt ein (in diesem Fall Benutzername). Wenn der Benutzer versucht, im zweiten Schritt die Eingabetaste zu drücken (in diesem Fall ein Passwort), passiert nichts, weil der Code auf die erste Eingabe der Seite, in diesem Fall des ersten Schritts, klickt.

Es gibt eine Art und Weise mit jQuery, so dass der Benutzer auf die entsprechende nächste Schaltfläche klicken kann? Ich finde die nächste Funktion, aber es funktioniert nur, wenn es das nächste Geschwisterelement ist.

+0

hi kann Problem beheben, indem Sie eindeutige Name-Werte verwenden, da es eine schlechte Idee ist, zwei Elemente mit demselben Namen zu haben –

Antwort

2

thre sind zwei Schaltfläche mit name=next, das Problem ist, weil Klick auf Passwort eingeben es erste Schaltfläche auswählen, die name=next

Lösung Aufgabe ist die Verwendung von next() Funktion in Jquery libarary machen.

$(this).parent().next('input[name="next"]').click(); 

ist ein andere Lösung Verwendung von eindeutigem Wert für Namen vlaue machen, weil seine schlechte Idee, zwei Elemente mit demselben Namen zu haben. versuche es unter ex.

<fieldset> 
    <div> 
     <input type="text" name="username" /> 
    </div> 
    <input type="button" name="usernamenext" value="Next" /> 
</fieldset> 
<!-- Second Step --> 
<fieldset> 
    <div> 
     <input type="password" name="password" /> 
    </div> 
    <input type="button" name="passwordnext" value="Next" /> 
</fieldset> 

und Sie jquery sein wie

$('input[name="username"], input[name="password"]').keypress(function (e) { 
    var key = e.which; 
    if (key == 13) { 
     $('input[name= "'+ $(this).attr('name') +'next"]').click(); 
     return false; 
    } 
}); 

die Nutzung einzigartiger alle Probleme zu beenden,

0

eine Traverse Verwenden Sie die spezifische Instanz zu zielen und vermeiden alle von ihnen klicken

$(this).parent().next().click(); 
Verwandte Themen