Méthodes "addClass" et "removeClass" javascript

**Regor** · 15/11/2015, 17h04

Bonsoir à tous !

Je débute avec javascript 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.
Ce code fonctionne bien. Sauf qu’il effectue les changements de couleur à partir du nom de l’option sélectionnée.

Je souhaite que les changements de couleur se fassent à partir de l’ID ou de la valeur de chaque option.

Merci de votre aide.

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
 
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Test</title>
		<meta charset="UTF-8" />
		<style type="text/css">
			.black {
				color: black;
			}
			.red {
				color: red;
				background: yellow;
			}
			.green {
				color: green;
			}
			.blue {
				color: blue;
			}
 
		</style>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	</head>
 
	<body>
 
		<h1>Javascript pour changement de couleur 1</h1>
		<div id="box1">
			Changement de couleur
		</div>
 
		<select id="select1">
			<option value="Black" id="Black">Black</option>
			<option value="Red" id="Red">Red</option>
			<option value="Green" id="Green">Green</option>
			<option value="Blue" id="Blue">Blue</option>
		</select>
		<script>
			$('select[id=select1]').change(function() {
				$('#box1').removeClass('black red green blue').addClass($(this).find('option:selected').text().toLowerCase());
			}).change();
 
		</script>
 
	</body>
</html>

**danielhagnoul** · 16/11/2015, 00h28

Code html :

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

1
2
3
4
5
6
<select id="select1">
  <option value="black">Black</option>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

Code javascript :

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

1
2
3
4
5
$( "#select1" ).on( "change", function(){
  $( '#box1' )
    .removeClass()
    .addClass( $(this).val() );
});

**Regor** · 16/11/2015, 15h20

Désole, mais ce code ne fonctionne pas

Invité · 16/11/2015, 16h35

Bonjour,

Dans ton code :

Code :

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

...........toLowerCase().........

Donc, ça signifie que les classes sont écrites en minuscules, et surtout que tu en es conscient !
Alors pourquoi mettre des majuscules dans les valeurs (value des options) ??

Mets dans les valeurs* (value des options) les noms des classes (en respectant la casse !) et ça fonctionnera (sans besoin d'ajouter .toLowerCase() )

Bref : comme tu viens de t'en rendre compte, la syntaxe est sensible à la casse.

* comme l'a fait danielhagnoul !

**Regor** · 16/11/2015, 21h02

Bonsoir

Je pense avoir bien suivi danielhagnoul & jreaux62. Mais cela ne fonctionne toujours pas.

Ci-dessous le code modifié.

Merci de votre aide.

Bonne soirée

Daniel

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Test</title>
		<meta charset="UTF-8" />
		<style type="text/css">
			.black {
				color: black;
			}
			.red {
				color: red;
				background: yellow;
			}
			.green {
				color: green;
			}
			.blue {
				color: blue;
			}
 
		</style>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	</head>
 
	<body>
 
		<h1>Javascript pour changement de couleur 1</h1>
		<div id="box1">
			Changement de couleur
		</div>
 
		<select id="select1">
			<option value="black">black</option>
			<option value="red">red</option>
			<option value="green">green</option>
			<option value="blue">blue</option>
		</select>
 
		<script>
			$("#select1").on("change", function() {
				$('#box1')
				.removeClass()
				.addClass($(this).val());
			});
		</script>
 
		<hr/>
 
	</body>
</html>

Invité · 16/11/2015, 21h18

Code :

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

1
2
3
4
5
6
7
<script>
$(function(){
	$('#select1').on('change', function() {
		$('#box1').removeClass().addClass( $(this).val() );
	});
});
</script>

Méthodes "addClass" et "removeClass" javascript

jQuery

Vue hybride

Partager

Partager