Méthodes "addClass" et "removeClass" de jQuery

**Regor** · 07/11/2015, 15h59

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

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

**NoSmoking** · 07/11/2015, 18h22

Bonjour,
tu as une erreur de logique dans ton code

Code :

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

1
2
3
4
$("select[id='liste']").change(function() {
    var couleur = $("select[id='liste'] > option:selected").val();
    $('#color').attr('id', couleur);
});

ton $('#color') change d'ID donc tu ne peux donc plus y accéder après ton premier passage.

Tu aurais meilleur intérêt à utiliser des classes

Méthodes "addClass" et "removeClass" de jQuery

jQuery

Vue hybride

Partager

Partager