Méthodes "addClass" et "removeClass" javascript
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:
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> |