Regrouper id en jQuery

Bonjour,

J'aimerai savoir comment regrouper des id en jQuery, pour faire apparaître le <span> adéquat, et pour ne pas devoir réecrire le code pour toutes les lettre de l'alphabet .

Voici le code jQuery :

<script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
    
    $("span([id^='a'])").click(function () {
     $("span([id^='aa'])").toggle("slow");

    });
    
  });
  </script>

Et le code html :

<a href="#" id="a">[A]</a>
<a href="#" id="al">[L]</a><br />

  <span id="aa" style="display: none;"><b>Agnes</b><br /><br />
Release me :<br /> 
                           <object height="20" width="200" type="application/x-shockwave-flash" data="http://www.estvideo.com/dew/media/dewplayer.swf?son=lien.mp3">
                            <param name="movie" value="dewplayer.swf?son=lien.mp3" />
</object>
</span>

 <span style="display: none;" id="aal"><b>Lady gaga</b><br />
love game :<br /> 
                             <object height="20" width="200" type="application/x-shockwave-flash" data="http://www.estvideo.com/dew/media/dewplayer.swf?son=lien.mp3">
                             <param name="movie" value="dewplayer.swf?son=lien.mp3" />
</object><br /><br /></span>

Merci beaucoup

EDIT par Felipe: pas de lien vers des mp3 dont tu n'aurais pas l'autorisation de diffusion

test DEEEEEWWW YAISSE
Modifié par ichigo92 (16 Nov 2009 - 18:52)

avec une classe ... ?

Benjamin-Ds a écrit :
avec une classe ... ?

Voilà.

Désolé pour les liens

Pouvez-vous expliquer votre réponse, je ne comprends pas pas bien

Eh bien c'est un peu le B.A.-ba de jQuery. Tu veux appliquer une fonction à tout un ensemble d'éléments de même type. Le plus logique dans ce cas est, dans ton code HTML, d'identifier ces éléments par une classe commune:

<a class="toggle-machin" id="machin-1">Paf, le premier lien</a><br />
<a class="toggle-machin" id="machin-2">Paf, le second lien</a>

Et donc avec jQuery:

$('.toggle-machin').click(function(){
  // On fait quelque chose
})

Reste à voir ce qu'on fait comme «quelque chose». Comme tu connais par coeur la documentation et les tutoriels de base de jQuery, tu sais que dans le contexte de notre fonction exécutée au clic (celle qui est vide pour l'instant) le mot-clé this désigne l'élément de la page qui a été cliqué. Si on veut utiliser les méthodes de jQuery pour obtenir des informations sur cet élément, il faut obtenir un objet jQuery, ce que l'on fait en passant l'objet this (un élément du DOM) à la fonction jQuery(), dont l'alias est $().

Donc, si on récupérer dans une variable la valeur de l'attribut id de l'objet cliqué, on peut faire:

$('.toggle-machin').click(function(){
  var idefix = $(this).attr('id');
})

À partir de là, mettons qu'on veut récupérer un autre élément que celui cliqué, élément qui aurait un attribut id avec le même numéro. Mettons que par convention, pour se faciliter la vie, on a des A qui ont pour id "machin-n", et des SPAN qui ont pour id "machin-n-box". On peut donc faire:

$('.toggle-machin').click(function(){
  var idefix = $(this).attr('id');
  $('#' + idefix + '-box').toggle('slow');
})

Même chose, plus compact:

$('.toggle-machin').click(function(){
  $('#' + $(this).attr('id') + '-box').toggle('slow');
})

Et voilà.

Ceci dit, vu ton code HTML ça a l'air pas terriblement accessible cette histoire. Juste une inquiétude comme ça...

Merci beaucoup pour ces réponses

Je devrai mettre quoi comme type de code html ?
Modifié par ichigo92 (17 Nov 2009 - 18:30)

ichigo92 a écrit :
Je devrai mettre quoi comme type de code html ?

Du code HTML valide.

Quant au détail... voir l'exemple que je donnais, le code JavaScript et le type de sélecteur jQuery que l'on «construit» en JavaScript dans mes exemples de code, et ton code HTML de départ. Tu devrais pouvoir écrire un code HTML qui correspond à tout ça. Et qui n'utilise pas des éléments B pour faire du texte en gras, on n'est plus en 1999.

Ok merci

Il faut dire que j'écris ça dans un éditeur wysiwyg...donc c'est pas génial

Mais merci beaucoup