jquery button click funktioniert nicht zum zweiten Mal auf fieldset?

Question

Ich habe 11 FieldSet mit und haben auch 11 Tasten zum Überspringen Zweck

Html

<button id="skip1">1</button> 
<button id="skip2">2</button> 
<button id="skip3">3</button> 

JQuery

$("#skip1").click(function(){ 
    alert("In1") 
     $("#field_1").show(); 
    }); 
$("#skip2").click(function(){ 
    alert("In2") 
     $("#field_2").show(); 
    }); 

    $("#skip3").click(function(){ 
    alert("In3") 
     $("#field_3").show(); 
    }); 

Das erste Mal, wenn sie feine andere Arbeit hat nicht funktioniert, nur Alarm auslösen Sonst Wenn Fieldsets übersprungen werden? Bitte gib mir einen Vorschlag.

Answer 1

Mit der Taste: Selektor und die Feldsets IDs und vorausgesetzt, dass der Text nur die Zahlen bleibt (dies funktioniert auch, wenn es die ID oder ein Datenattribut oder Wert ist, wenn der Code entsprechend geändert wird ie), der folgende Code wird beim Klicken auf die Schaltfläche alle Feldgruppen ausblenden und nur die anzeigen, die der ID der angeklickten Schaltfläche entsprechen. Beachten Sie, dass 11 Feldsets und Schaltflächen berücksichtigt werden müssen, damit alle Schaltflächen und Feldgruppen von einem Code aus gesteuert werden können. Hinweis: Ich habe gerade einige Fieldsets für Demozwecke getäuscht.

$(document).ready(function(){ 
 
       $(":button").click(function() { 
 
        var id=$(this).text(); 
 
        alert("In"+id); 
 
        $('fieldset').hide(); 
 
        $('#field_'+ id).show(); 
 
       }); 
 
    
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id="skip1">1</button> 
 
<button id="skip2">2</button> 
 
<button id="skip3">3</button> 
 

 
<form> 
 
    <fieldset id="field_1"> 
 
    <legend>test 1:</legend> 
 
    Name 1: <input type="text"><br> 
 
    Email 1: <input type="text"><br> 
 
    </fieldset> 
 
    
 
    <fieldset id="field_2"> 
 
    <legend>test 2:</legend> 
 
    Name 2: <input type="text"><br> 
 
    Email 2: <input type="text"><br> 
 
    </fieldset> 
 
    
 
    <fieldset id="field_3"> 
 
    <legend>test 3:</legend> 
 
    Name 3: <input type="text"><br> 
 
    Email 3: <input type="text"><br> 
 
    </fieldset> 
 
</form>

Answer 2

schreiben Sie Ihre jquery innen Dokument bereit

$(document).ready(function() { 
    $("#skip1").click(function() { 
     alert("In1") 
     $("#field_1").show(); 
    }); 
    $("#skip2").click(function() { 
     alert("In2") 
     $("#field_2").show(); 
    }); 

    $("#skip3").click(function() { 
     alert("In3") 
     $("#field_3").show(); 
    }); 
}) 

JS Geige. https://jsfiddle.net/euftx1a6/

Answer 3

ein Fieldset ein- und ausblenden andere ausblenden() verwendet Try this:

$("#skip1").click(function(){ 
     $("#field_1").show(); 
     $("#field_2").hide(); 
     $("#field_3").hide(); 
}); 
$("#skip2").click(function(){ 
     $("#field_2").show(); 
     $("#field_1").hide(); 
     $("#field_3").hide(); 
}); 
$("#skip3").click(function(){ 
     $("#field_3").show(); 
     $("#field_1").hide(); 
     $("#field_2").hide(); 
});