Comment éviter une suite de IF ?
Résolu
emrh Messages postés 427 Date d'inscription Statut Membre Dernière intervention -
Bonjour à tous,
Voici un code qui fonctionne mais j'ai bien conscience qu'il ne fait pas très PRO'pre !
Existe t-il un moyen de l'alléger pour éviter cette suite de if ?
Merci pour vos lumières !
function navSection2(arg){
// Récupération de l'onglet qui vient d'être sélectionné :
var ongletActif = arg;
// 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');
// Modification de la class de l'onglet qui vient d'être activé :
onglet.classList.add("actif");
// Retrait de la class 'actif' à tous les autres :
if(ongletActif != 'contact'){
contact.classList.remove('actif');
}
if(ongletActif != 'contrats'){
contrats.classList.remove('actif');
}
if(ongletActif != 'factures'){
factures.classList.remove('actif');
}
if(ongletActif != 'reglements'){
reglements.classList.remove('actif');
}
if(ongletActif != 'notes'){
notes.classList.remove('actif');
}
}
Linux / Chrome 106.0.0.0
- Willemse le piege à éviter à tout prix
- Éviter pub youtube - Accueil - Streaming
- Prix - Guide
- Jeux le juste prix à télécharger - Télécharger - Jeux vidéo
- Prix d'un appel local - Forum telephonie fixe
- Historique prix amazon - Guide
5 réponses
Salut,
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/switch
devrait répondre favorablement à ta demande...
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');
}
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...
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.
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" ?
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