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
Partager