Discussion :

[knebhi]

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 :

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());
            });
 
 
        });

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
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

[knebhi]

voici ma maniere de faire :

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
25
26
27
 function fadeSujet() {
            $("div#links p#phrase").each(function() {
 
                $(this).find("em#sujet").css("color", "#FFCC00");
 
            });
 
        }
        function fadePredicat() {
            $("div#links p#phrase").each(function() {
 
                $(this).find("em#predicat").css("color", "#cc0000");
 
            });
 
        }
  $(document).ready(function() {
 
            $(".fadeSUJET").click(function() {
                fadeSujet($(this).html());
            });
            $(".fadePREDICAT").click(function() {
                fadePredicat($(this).html());
            });
 
 
        });

pour le html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<p><a class="fadeSUJET" href="#"
	style="background-color: #ffcc00; color: #fff;">Sujet</a> <a
	class="fadePREDICAT" href="#"
	style="background-color: #cc0000; color: #fff;">Prédicat</a>
</p>

merci