Comment utiliser jquery pour afficher les champs de formulaire cachés

Question

J'ai trois champs de saisie pour collecter les numéros de téléphone des utilisateurs. J'affiche un champ et cache les deux autres. J'ai placé un lien (ajouter le numéro de la maison) ci-dessous et quand vous clique sur le lien, il affiche le champ de saisie caché. Et j'ai placé un lien de plus en dessous quand on clique sur le dernier champ de saisie.

<input type="text" /> 
    <a href="#" class="show" >Add Home Number</a> 
    <div style="display: none"> 
     <input type="text" /> 
    <a href="#" class="show" >Add Office Number</a> 
    </div>    
    <div style="display: none"> 
     <input type="text" /> 
    </div>    

Et le jquery ressemble à ceci ..

<script> 
    $(function(){ 
    $(".show").click(function() { 
    $(this).next("div").show("slow"); 
    }); 
    }); 
</script> 

Le premier lien fonctionne très bien, mais la seconde ne fonctionne pas.

J'apprécie toute aide.

Merci.

Answer 1

.next() sélectionne uniquement l'élément suivant de frères et soeurs. Vos liens n'ont pas de frères et sœurs ultérieurs, car vous fermez immédiatement l'élément parent (le div). Vous devez sélectionner le prochain frère du div:

<script> 
    $(function(){ 
     $(".show").click(function() { 
      $(this).parent().next("div").show("slow"); 
     }); 
    }); 
</script> 

Answer 2

vous devez utiliser la fonction each:

comme ceci:

$(".show").each($(this).click(function() { 
    $(this).next("div").show("slow"); 
    }) 
);