11521 sujets

JavaScript, DOM et API Web HTML5

Alterner 3 css onclick

Bonjour,
j'arrive a alterner 3 css sur une div de cette manière (peut-être y a t'il plus simple je ne sais pas
- au premier clic je passe de class1 a class2
-au deuxieme clic je passe de class2 a class3
je voudrais que le le 3eme clic refasse passer class3 a class1, 4eme class1 a class2 etc, et je n'y arrive pas
quelle solution

	  .btn {
  background: #ccc;
  border-radius: 5px;
  display: inline-block;
  padding: 2px;
}
    .class1 {
    color: #f00;
}

.class2 {
    color: #00f;
}
	  .class3 {
    color: #000;
}


 <div id="div" class="class1">
montext<br>
montext2<br></div>
<div><span class="btn" onclick="change()">Cliquez</span></div>



 var Cl = document.querySelector("#div").classList;	
function change() {
  if (Cl.contains("class1")) {
 
    Cl.remove("class1");
    Cl.add("class2");
  }
else {
 if (Cl.contains("class2")) {
 
    Cl.remove("class2");
    Cl.add("class3");
 }}}
Modérateur
Bonjour,

Et bien il faut rajouter "if class 3 then class 1" comme tu l'as déjà fait non ?

Et pour le else tu peux utiliser directement un elseif plutot que des les emboiter les un dans les autres :

if (Cl.contains("class1")){
      Cl.remove("class1");
      Cl.add("class2");
} else if (Cl.contains("class2")) {
      Cl.remove("class2");
      Cl.add("class3");
} else if (Cl.contains("class3")) {
      Cl.remove("class3");
      Cl.add("class1");
} else {
  // fallback en cas de soucis
      Cl.add("class1");
}
Fait un tableau (ou un objet comme tu veux) avec tes différentes valeurs et au clic tu récupères la valeur qui suit la classe en cours.

L'avantage de faire ça c'est que tu pourras rajouter des valeurs/classes dans ton tableau si besoin et que tu n'auras pas à faire tout un tas de if else.
Modifié par bzh (28 Jul 2017 - 11:39)
Sujet clos
Aller à