Ein- und Ausblenden von Eingabefeldern mit onclick oder ähnlicher Funktion

-1

Ich habe mehrere Eingabefelder. Ich möchte nur, dass ich auf einmal zeige. Wenn der Benutzer die Eingabe der Informationen beendet hat und die nächste Schaltfläche drückt, wird die erste Eingabe ausgeblendet und die zweite Eingabe angezeigt. Wenn sie das nächste Mal drücken, wird die zweite Eingabe ausgeblendet und die dritte Eingabe usw. angezeigt. Ich habe versucht, die div und Eingabefelder direkt mit hide()/show() JQuery-Funktionen zu verstecken, aber es scheint nicht zu funktionieren. Hier ist ein grundlegendes Beispiel für die Struktur, die ich benutze, jede Eingabe wird sehr geschätzt.Ein- und Ausblenden von Eingabefeldern mit onclick oder ähnlicher Funktion

Bearbeiten: Aktualisiert die JSBIN und Beispielcode auf die Methode, die ich versucht habe zu arbeiten.

JSBIN: http://jsbin.com/wixiyaraxi/edit?html,output 


    <!DOCTYPE html> 
    <html> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width"> 
     <title>JS Bin</title> 
    </head> 
    <body> 

    <!-- // should be VISABLE at the start and be HIDDEN when Next button is clicked. --> 
    <div id="test1"> 
    <input type="text" id="test1" class="form-control" placeholder="Input 1:"> 
    </div> 

    <!-- // should be HIDDEN at the start and be VISABLE when Next button is clicked. --> 
    <!-- // when the Next button is clicked a second time should be HIDDEN.--> 
    <div id="test2"> 
    <input type="text" id="test2" class="form-control" placeholder="Input 2:"> 
    </div> 

    <!-- // should be hidden at the start and show when Next button is clicked a second time. --> 
    <div id="test3"> 
    <input type="text" id="test3" class="form-control" placeholder="Input 3:"> 
    </div> 


    <button type="button" class="btn btn-warning">Next</button> 
     </div> 

    </body> 
    </html> 

<script> 

$("#button").click(function(){ 
    $("#test1").hide(); 
    $("#test2").show(); 
}) 
</script>

Quelle

2016-08-22 Pyreal

Es sieht aus wie Sie die JavaScript nicht mit einberechnet, die Sie versuchten, benutzen. Bitte aktualisieren Sie Ihre Frage, um dies zu berücksichtigen, andernfalls sollte sie geschlossen werden als [off-topic (# 1)] (/ help/on-topic) – zzzzBov

Sie können wie folgt tun:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
    <script type="text/javascript" src="https://code.jquery.com/jquery-latest.js"></script> 
</head> 
<body> 

<!-- // should be VISABLE at the start and be HIDDEN when Next button is clicked. --> 
<div class="test1"> 
    <input type="text" id="test1" class="form-control" placeholder="Input 1:"> 
</div> 

<!-- // should be HIDDEN at the start and be VISABLE when Next button is clicked. --> 
<!-- // when the Next button is clicked a second time should be HIDDEN.--> 
<div class="test2"> 
    <input type="text" id="test2" class="form-control" placeholder="Input 2:"> 
</div> 

<!-- // should be hidden at the start and show when Next button is clicked a second time. --> 
<div class="test3"> 
    <input type="text" id="test3" class="form-control" placeholder="Input 3:"> 
</div> 


<button type="button" class="btn btn-warning">Next</button> 
</div> 
    <script type="text/javascript"> 
    jQuery(document).ready(function($){ 
     var i = 1; 
     $(".form-control").each(function(){ 
      $(this).hide(); 
     }); 
     $("#test" + i).show(); 

     $(".btn").click(function(){ 
      if(i < 3){ 
       i++; 
      } 
      $(".form-control").hide(); 
      $("#test" + i).show(); 
     }); 
    }); 
    </script> 
</body> 
</html>

Quelle

2016-08-22 18:08:33 Sateesh

die Sie interessieren, geben Sie Ihre <div> Eingangs Container eine Klasse "Input", alles andere als das erste Kind in CSS verstecken. Sobald Sie, dass an der richtigen Stelle, können die Schaltfläche Click-Handler als so einfach sein: die aktuelle sichtbar .input div bekommen, verstecken sie zeigen dann die nächste

$(function() { 
    $('button').on('click', function() { 
     var $cur = $('div.input:visible'); 
     $cur.hide(); 
     $cur.next().show(); 
    }); 
});

Quelle

2016-08-22 18:08:56

dies verbirgt nur sichtbare Eingaben korrekt? Es werden keine Dateien angezeigt, die als versteckt angezeigt werden (style = "display: none") – Pyreal

Ein- und Ausblenden von Eingabefeldern mit onclick oder ähnlicher Funktion

Antwort

Verwandte Themen