Comment rationaliser et compresser le code jQuery répétitif

Question

Je veux cliquer sur un lien et basculer entre deux blocs de contenu, dans une liste de contenu, pour passer essentiellement de l'affichage du contenu à la modification du contenu.

J'ai les snipits suivantes de code:

<style type="text/css"> 
    div.show {display:block;} 
    input.hide {display:none;} 
</style> 

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('#d-01').on('click', function() { 
      $('#d-01-on').toggle(); 
      $('#d-01-off').toggle(); 
      $('#d-01-off').focus(); 
     }); 
     $('#d-02').on('click', function() { 
      $('#d-02-on').toggle(); 
      $('#d-02-off').toggle(); 
      $('#d-02-off').focus(); 
     }); 
     $('#d-99').on('click', function() { 
      $('#d-99-on').toggle(); 
      $('#d-99-off').toggle(); 
      $('#d-99-off').focus(); 
     }); 
    }) 
</script> 

<a href="#" id="d-01">edit</a> 
<div class="show" id="d-01-on">Some content</div> 
<input class="hide" id="d-01-off" name="d-01" value="Some content" /> 

<a href="#" id="d-02">edit</a> 
<div class="show" id="d-02-on">Some content</div> 
<input class="hide" id="d-02-off" name="d-02" value="Some content" /> 

<a href="#" id="d-99">edit</a> 
<div class="show" id="d-99-on">Some content</div> 
<input class="hide" id="d-99-off" name="d-99" value="Some content" /> 

Cela fonctionne, mais je veux faire mon jquery/javascript code plus dynamique et non codés en dur. Mes rangées de tables MySQL augmenteront avec le temps et je ne veux pas devoir continuer à éditer mon script.

Est-il possible de réécrire le code jquery pour gérer dynamiquement les ID plutôt que de devoir créer des on('click', function() individuels et redondants?

Merci de votre aide.

[voir How to Toggle in jQuery pour ma première question à ce problème]

Answer 1

Je ne sais pas si j'understanded ce que vous voulez, mais ici je vais:

d'abord ajouter un div pour envelopper chaque section repetive du balisage HTML, dans cet exemple, j'ai ajouté une classe appelée -enveloppe de contenu ajouter l'événement click jquery plus facile:

<div class="content-wrapper"> 
    <a href="#" id="d-01">edit</a> 
    <div class="show" id="d-01-on">Some content</div> 
    <input class="hide" id="d-01-off" name="d-01" value="Some content" /> 
</div> 

<div class="content-wrapper"> 
    <a href="#" id="d-02">edit</a> 
    <div class="show" id="d-02-on">Some content</div> 
    <input class="hide" id="d-02-off" name="d-02" value="Some content" /> 
</div> 

<div class="content-wrapper"> 
    <a href="#" id="d-99">edit</a> 
    <div class="show" id="d-03-on">Some content</div> 
    <input class="hide" id="d-03-off" name="d-03" value="Some content" /> 
</div> 

Puis j'ai modifié le JS au code suivant:

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('.content-wrapper a').on('click', function() { 
      $(this).siblings().toggle(); 
      $(this).siblings('input').focus(); 
     }); 
    }) 
</script> 

La JS ajoute un événement à chaque ancre (une étiquette) à l'intérieur des divs de-emballage de contenu, puis quand on clique dessus, il vérifie ses frères et sœurs (les balises à côté aiment: div.show et l'entrée) et les permute. J'ai ajouté un filtre dans les deuxièmes frères et sœurs pour obtenir seulement l'entrée de l'ancre cliquée et la focaliser. Je n'ai pas testé mais cela devrait fonctionner.