bonjour,
j'ai utiliser la bibliothèque jquery pour tenter de créer une page dynamique avec un sytème de couleur et où à chaque clic sur la case couleur l'élément d'une phrase se colore.
ex: je clique sur la case jaune et le contenu d'une balise em se colore en jaune.
voici le site sur lequel jai pris une base du code : http://www.jankoatwarpspeed.com/post...rs-jQuery.aspx
voici le code :
tout d'abord le js qui permet de changer les couleurs des champs spécifiés
voici la partie html :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 function fadeElements(color) { $("div#links p#phrase").each(function(i) { $(this).find("em#sujet").css("color", color); }); } $(document).ready(function() { $(".fadeSUJET").click(function() { fadeElements($(this).html()); }); });
en bref, a chaque fois que je clique sur une couleur un élément em (selon l'id) devra se colorer.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24 <div id="resultat"> <div id="headerResultat"> <h4>Fonction Syntaxique</h4> </div> <p><a class="fadeSUJET" href="#" style="background-color: #ffcc00; color: #fff;">#ffcc00</a> <a class="fadePREDICAT" href="#" style="background-color: #cc0000; color: #fff;">red</a> <a class="fadeCODCOI" href="#" style="background-color: #0099ff; color: #fff;">blue</a> <a class="fadeCC" href="#" style="background-color: #336600; color: #fff;">green</a> <a class="fadeALL" href="#" style="background-color: #000000; color: #fff;">black</a></p> <div id="links"> <p id="phrase"><em id="sujet">Le chat</em> <em id="predicat">mange</em> <em id="CC">dans la cour</em><em id="ponct">.</em></p> </div> </div>
le soucis pour le moment est que je n'arrive qu'a colorer le premier element (le sujet)
je voudrais la meme règle pour chaque élément em et cela séparement.
merci







Répondre avec citation
Partager