fade color using jquery : adapter le code
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
Code:
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());
});
}); |
voici la partie html :
Code:
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> |
en bref, a chaque fois que je clique sur une couleur un élément em (selon l'id) devra se colorer.
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
