Refactorisation et évaluation

Question

J'utilise javascript pour basculer l'état d'affichage de certains objets en fonction de l'heure du jour. Un exemple du code est donné ci-dessous. Je me demandais si quelqu'un pouvait suggérer comment je pourrais refactoriser ce code tout en améliorant la logique.

switch(tcode) {    
      case 'eur'  : eur.setAttribute('style', 'display:block; opacity:0.5'); 
          us.style.display = 'none'; 
          asia.style.display = 'none'; 
          us_inactive.style.display = 'block'; 
          asia_inactive.style.display = 'block'; 
      break; 

      case 'us'  : us.style.display = 'block'; 
          eur.style.display = 'none'; 
          asia.style.display = 'none'; 
          eur_inactive.style.display = 'block'; 
          asia_inactive.style.display = 'block'; 

      break; 

      case 'asia' : asia.setAttribute('style', 'display:block; opacity:0.5'); 
          us.style.display = 'none'; 
          eur.style.display = 'none'; 
          eur_inactive.style.display = 'block'; 
          us_inactive.style.display = 'block'; 

Answer 1

Si vous êtes affin de l'affichage de certains éléments (sans animations de fantaisie), vous pouvez utiliser les CSS pour simplifier le code javascript.

Je suppose une structure html comme ceci:

<div id="wrapper"> 
    ... 
    <div id="eur">...</div> 
    <div id="us">...</div> 
    <div id="asia">...</div> 

    <div id="eur_inactive">...</div> 
    <div id="us_inactive">...</div> 
    <div id="asia_inactive">...</div> 
    ... 
</div> 

Pour autant que je compris, il y a trois viewstates, à savoir eurusasia qui sont au moment traité dans la déclaration switch.

Sur cette base, vous définissez les différents viewstates dans votre feuille de style comme ceci:

/* eur */ 
.viewstate-eur { 
} 

    .viewstate-eur #eur { display:block; opacity:0.5; } 

    .viewstate-eur #us, 
    .viewstate-eur #asia { display:none; } 

    .viewstate-eur #us_inactive, 
    .viewstate-eur #asia_inactive { display:block; } 

/* us */ 
.viewstate-us { 
} 

    .viewstate-us #us { display:block; } 

    .viewstate-us #eur, 
    .viewstate-us #asia { display:none; } 

    .viewstate-us #eur_inactive, 
    .viewstate-us #asia_inactive { display:block; } 

/* asia */ 
.viewstate-asia { 
} 

    .viewstate-asia #asia { display:block; opacity:0.5; } 

    .viewstate-asia #us, 
    .viewstate-asia #eur { display:none; } 

    .viewstate-asia #us_inactive, 
    .viewstate-asia #eur_inactive { display:block; } 

Et votre code javascript se résume à la mise en ViewState correcte via la propriété className de div#wrapper.

// assuming tcode is one of eur, us, asia 
document.getElementById('wrapper').className = 'viewstate-' + tcode; 

Je préfère toujours définir des styles CSS dans la feuille de style et les affecter à l'aide du class ou id attribut plutôt que de les mettre directement via javascript, si possible. Rend le code javascript plus propre et place le CSS à sa place (dans la feuille de style). Vous ne savez pas si votre feuille de style est validée en raison de la propriété opacity.