Méthodes "addClass" et "removeClass" de jQuery
Bonjour à tous !
Je débute avec le JQuery et je n'arrive pas à débloquer un problème. .
J'ai une liste déroulante qui change la couleur d'un texte se trouvant dans une DIV.
Mais ce code ne fonctionne que partiellement.
En effet, ma liste ne fonctionne qu'une seule fois.
Si je choisi rouge mon texte devient rouge et ne peut plus passer vert en le changeant dans ma liste déroulante et inversement.
A priori, les méthodes "addClass" et "removeClass" de jQuery sont nécessaires pour le bon fonctionnement.
Merci de votre aide.
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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
| <!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="UTF-8" />
<style type="text/css">
#color1 {
color: #F00
}
#color2 {
color: #0C0
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>
<div>
<select name="maliste" id="liste">
<option value="0">Faire un choix</option>
<option value="color1">Rouge</option>
<option value="color2">Vert</option>
</select>
</div>
<div id="color">Mon texte en couleur</div>
<script>
$("select[id='liste']").change( function() {
var couleur = $("select[id='liste'] > option:selected").val();
$('#color').attr('id', couleur);
}
);
</script>
</body>
</html> |
