Appliquer à un style à "tous, sauf"

**AIexis** · 15/07/2007, 12h52

Bonjour,
J'aimerais savoir si il est possible d'appliquer un style à tous les éléments, sauf un.
Exemple, j'ai 5 boutons blancs, qui changent de couleur (-> rouge) quand je clique dessus. Je veux qu'il n'y ait toujours qu'un seul bouton rouge.
Au clic, le bouton, disons 1, devient rouge:

Code :

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

document.getElementById("bouton1").className="button_rouge";

Je voudrais que les autres deviennent blancs

Code :

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

document.getElementById("tous les boutons sauf le 1").className="button_blanc";

Y'a t'il moyen ?
Merci

**epsilon68** · 15/07/2007, 15h56

moi je dirais utilise JQuery,
on peut selectionner un ensemble pour lui changer sa class etc...

**AIexis** · 15/07/2007, 16h01

Ok, merci, je vais regarder ça de près.

**AIexis** · 15/07/2007, 17h10

Bonjour Auteur, et merci pour ton code

A priori j'ai fait autre chose, qui fonctionne, à savoir, une fonction qui "blanchi" tous les boutons, et que j'appelle à chaque fois.

Code :

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

1
2
3
4
5
6
function decocher(){
	for(var i=1; i<6; i++){
		var b = "bouton" + i ;
		document.getElementById(b).className="bouton_blanc";
	}
}

Ensuite, il ne me reste plus qu'à "rougir" le bouton coché, avec la commande citée dans le premier message.

Code :

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

1
2
3
 
decocher() ;
document.getElementById("bouton1").className="bouton_rouge";

Pas très propre, mais plus court. Pas forcément très rapide (je sais pas trop), mais c'est pas grave.

**Auteur** · 15/07/2007, 17h12

bonjour,

fais une liste de tes boutons :

Code javscript :

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
 
function listerBouton()
{
 var listeInput = document.getElementsByTagName("input");
 var listeBoutons = new Array();
 var i, j, n;
 
 try {
   n = listeInput.length;
   j=0;
 
   for (i=0; i<n; i++)
   {
    if (listeInput[i].type.toLowerCase()=="button")
    {
       listeBoutons[j] = listeInput[i];
       j++;
    }
   }
   if (j<=0)
      throw "Erreur..";
 }
 catch(e)
 {
   listeBoutons = null;
 }
 
 return listeBoutons;
}

puis lorsque tu cliques sur un bouton affecte lui la classe "button_rouge" et aux autres "button_blanc".

[edit]j'ai réédité mon post au moment où tu postait ta réponse pour te proposer une autre solution.... et nos messages se sont croisés

J'ai donc supprimé mon message et reposter mon code. (Pour ceux qui n'ont rien compris à ce j'ai dit : je suis fatigué aujourd'hui

)[/edit]

**AIexis** · 15/07/2007, 17h19

Envoyé par Auteur

[edit]j'ai réédité mon post au moment où tu postait ta réponse pour te proposer une autre solution.... et nos messages se sont croisés

J'ai donc supprimé mon message et reposter mon code. (Pour ceux qui n'ont rien compris à ce j'ai dit : je suis fatigué aujourd'hui

)[/edit]

Non, c'est pas vrai, c'est juste que j'avais deviné que tu allais poster, et j'ai anticipé le merci

**Auteur** · 15/07/2007, 17h22

voici donc une autre solution, mémorise le dernier bouton cliqué (cela évite de les lister) :

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
39
40
41
42
43
44
45
46
47
48
49
50
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
.bouton_blanc{
 background-color : #FFFFFF;
}
.bouton_rouge{
 background-color : #FF0000;
}
 
//-->
</style>
 
<script type="text/javascript">
<!--
var oldBtClic = null;//pas de bouton cliquer initialement
 
function changeStyle(bt)
{
  if (oldBtClic!=bt)
  {
    bt.className="bouton_rouge";
    if (oldBtClic!=null)
       oldBtClic.className = "bouton_blanc";
  }
 
  oldBtClic = bt; //memorisation du dernier bouton clique
}
 
 
//-->
</script>
 
</head>
 
<body>
 
<input type="button" value="Bouton 1" class="bouton_blanc" onclick="changeStyle(this)" />
<input type="button" value="Bouton 2" class="bouton_blanc" onclick="changeStyle(this)" />
<input type="button" value="Bouton 3" class="bouton_blanc" onclick="changeStyle(this)" />
<input type="button" value="Bouton 4" class="bouton_blanc" onclick="changeStyle(this)" />
<input type="button" value="Bouton 5" class="bouton_blanc" onclick="changeStyle(this)" />
 
 
</body>
 
</html>

**AIexis** · 15/07/2007, 17h24

Envoyé par Auteur

voici donc une autre solution, mémorise le dernier bouton cliqué (cela évite de les lister) :

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
39
40
41
42
43
44
45
46
47
48
49
50
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
.bouton_blanc{
 background-color : #FFFFFF;
}
.bouton_rouge{
 background-color : #FF0000;
}
 
//-->
</style>
 
<script type="text/javascript">
<!--
var oldBtClic = null;//pas de bouton cliquer initialement
 
function changeStyle(bt)
{
  if (oldBtClic!=bt)
  {
    bt.className="bouton_rouge";
    if (oldBtClic!=null)
       oldBtClic.className = "bouton_blanc";
  }
 
  oldBtClic = bt; //memorisation du dernier bouton clique
}
 
 
//-->
</script>
 
</head>
 
<body>
 
<input type="button" value="Bouton 1" class="bouton_blanc" onclick="changeStyle(this)" />
<input type="button" value="Bouton 2" class="bouton_blanc" onclick="changeStyle(this)" />
<input type="button" value="Bouton 3" class="bouton_blanc" onclick="changeStyle(this)" />
<input type="button" value="Bouton 4" class="bouton_blanc" onclick="changeStyle(this)" />
<input type="button" value="Bouton 5" class="bouton_blanc" onclick="changeStyle(this)" />
 
 
</body>
 
</html>

impec !

merci encore

Appliquer à un style à "tous, sauf"

JavaScript

Discussions similaires

Partager

Partager