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 - Modifié le 20 oct. 2022 à 10:02
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

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

A voir également:

5 réponses

blux Messages postés 26446 Date d'inscription dimanche 26 août 2001 Statut Modérateur Dernière intervention 4 novembre 2024 3 312
20 oct. 2022 à 10:07

Salut,

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/switch

devrait répondre favorablement à ta demande...


0
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 20
20 oct. 2022 à 10:09

Super blux,
J'me penche sur cette instruction !

0
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 20
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');

}


 

0
blux Messages postés 26446 Date d'inscription dimanche 26 août 2001 Statut Modérateur Dernière intervention 4 novembre 2024 3 312
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...

0
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 20 > blux Messages postés 26446 Date d'inscription dimanche 26 août 2001 Statut Modérateur Dernière intervention 4 novembre 2024
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 !

0
blux Messages postés 26446 Date d'inscription dimanche 26 août 2001 Statut Modérateur Dernière intervention 4 novembre 2024 3 312 > emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024
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 ! ;-)

0

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.

0
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 20
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" ?

0
Pitet > 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: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");
}
1

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 20
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 !
 

0