Comment éviter une suite de IF ?
Résolu/Fermé
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 - 20 oct. 2022 à 13:35
- Comment éviter une suite de IF ?
- Marques smartphone à éviter - Guide
- Comment eviter paris sur waze ✓ - Forum Réseaux sociaux
- Marque ordinateur portable à éviter ✓ - Forum PC portable
- Willemse le piege à éviter à tout prix - Forum Consommation & Internet
- Éviter pub youtube - Guide
5 réponses
20 oct. 2022 à 10:07
Salut,
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/switch
devrait répondre favorablement à ta demande...
20 oct. 2022 à 10:09
Super blux,
J'me penche sur cette instruction !
Modifié le 20 oct. 2022 à 10:39
J'ai écrit ça qui fonctionne mais qui est bien plus long que mes IF !
function navSection2(arg) {
// Affectation de variables pour les noms d'onglets :
var contact = document.getElementById('contact');
var contrats = document.getElementById('contrats');
var factures = document.getElementById('factures');
var reglements = document.getElementById('reglements');
var notes = document.getElementById('notes');
switch (arg) {
case 'contact':
contact.classList.add("actif");
contrats.classList.remove("actif");
factures.classList.remove("actif");
reglements.classList.remove("actif");
notes.classList.remove("actif");
break;
case 'contrats':
contact.classList.remove("actif");
contrats.classList.add("actif");
factures.classList.remove("actif");
reglements.classList.remove("actif");
notes.classList.remove("actif");
break;
case 'factures':
contact.classList.remove("actif");
contrats.classList.remove("actif");
factures.classList.add("actif");
reglements.classList.remove("actif");
notes.classList.remove("actif");
break;
case 'reglements':
contact.classList.remove("actif");
contrats.classList.remove("actif");
factures.classList.remove("actif");
reglements.classList.add("actif");
notes.classList.remove("actif");
break;
case 'notes':
contact.classList.remove("actif");
contrats.classList.remove("actif");
factures.classList.remove("actif");
reglements.classList.remove("actif");
notes.classList.add("actif");
break;
}
}
Voici un autre code que je viens d'écrire, beaucoup plus court et qui fonctionne...
Mais je me demande si c'est bien de coder comme ça ?
function navSection2(arg) {
// Récupération de l'onglet qui vient d'être sélectionné :
var ongletActif = arg; //contact
// Affectation de variables pour les noms d'onglets :
var onglet = document.getElementById(arg);
var contact = document.getElementById('contact');
var contrats = document.getElementById('contrats');
var factures = document.getElementById('factures');
var reglements = document.getElementById('reglements');
var notes = document.getElementById('notes');
// Suppression de toutes les class 'actif' :
contact.classList.remove('actif');
contrats.classList.remove('actif');
factures.classList.remove('actif');
reglements.classList.remove('actif');
notes.classList.remove('actif');
// Activation de la class 'actif' sur l'onglet sélectionné :
onglet.classList.add('actif');
}
20 oct. 2022 à 11:03
C'est bien plus simple, donc ce sera plus rapide et plus lisible...
Je n'avais donné le "switch" que pour éviter ce que je voyais comme une suite inutile de if, je n'ai pas regardé dans le détail ce que tu en faisais...
20 oct. 2022 à 11:31
Merci, je garde l'idée du switch de côté pour d'autres utilisations, c'est idiot de ma part de ne pas y avoir pensé, d'autant qu'il m'arrive de l'utiliser en PHP !
Modifié le 20 oct. 2022 à 11:55
c'est idiot de ma part de ne pas y avoir pensé
Il y plus d'idées dans deux têtes que dans une ! ;-)
Bonjour,
Une solution plus courte :
const onglets = ['contact', 'contrats', 'factures', 'reglements', 'notes'];
function navSection3(ongletActif) {
onglets.forEach(onglet => {
document.getElementById(onglet).classList.remove("actif");
});
document.getElementById(ongletActif).classList.add("actif");
}
Au lieu d'utiliser une boucle ou une suite de if, tu pourrais aussi ajouter une classe css commune à tous les onglets afin de les pouvoir les cibler en js avec document.querySelectorAll ou document.getElementsByClassName et ainsi éviter de devoir écrire les id de tes onglets en dur dans ton code.
Modifié le 20 oct. 2022 à 11:39
Cette solution effectivement fait très PRO'pre !
Je vais m'inspirer de ce que tu me proposes... Je vais le modifier car un clic sur un lien active aussi l'apparition de la DIV correspondante et le FADE OUT de celle dont le lien n'a plus le focus !
Par contre je ne comprends pas comment utiliser ta proposition de class css commune car je dois signifier à l'utilisateur par des moyens visuels qu'il est sur tel ou tel "onglet" ?
20 oct. 2022 à 13:06
Le fait d'écrire les id en dur dans ton code pose des problèmes de maintenabilité car tu devras modifier ton code si tu modifies tes onglets.
En ajoutant une classe css, par exemple "onglet" sur tous les onglets, tu peux utiliser le sélecteur css ".onglet" pour les sélectionner et rendre ton code plus générique :
function navSection3(ongletActif) {
document.querySelectorAll('.onglet').forEach(onglet => {
onglet.classList.remove("actif");
});
document.getElementById(ongletActif).classList.add("actif");
}
Tu peux ajouter un if pour vérifier si l'onglet est déjà actif :
function navSection3(ongletActif) {
if (document.getElementById(ongletActif).classList.contains("actif")) {
return;
}
document.querySelectorAll(".onglet").forEach(onglet => {
onglet.classList.remove("actif");
});
document.getElementById(ongletActif).classList.add("actif");
}
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
20 oct. 2022 à 13:35
Merci Pitet, c'est vraiment sympa d'avoir pris le temps de m'expliquer !
Je modifie ma page avec ta proposition !
