en passant "this" comme argument

Question

Je suis un développeur web assez nouveau qui apprend html5 et javascript.

J'ai une page Web avec des «onglets» qui font disparaître et réapparaissent des parties de la page Web.

Les liens sont comme ceci:

<a href="?tab=1" id="t1" class="tab" onclick="switchf('Home',this)">HOME</a> 

et la fonction javascript switchf() est comme ceci:

function switchf(field,tab) { 
    var divs = ["Home","About","Chatroom","Account","Contact","Signup"]; 
    for(var j = 0; j < divs.length; j++) { 
     if(field != divs[j]) 
      document.getElementById(divs[j]).style.display = "none"; 
     else 
      document.getElementById(divs[j]).style.display = "block"; 
    } 

    var t = document.getElementsByClassName("tab"); 
    for(var i = 0; i < t.length; i++) { 
     t[i].style.backgroundColor = "#dddddd"; 
    } 

    tab.style.backgroundColor = "#cccccc"; 
    document.getElementsByTagName("title")[0].innerHTML = field; 
} 

Il prend deux arguments - la partie de la page qui apparaît et l'onglet qui était pressé.

Il passe en revue les parties de la page et les modifie toutes en display="none", puis passe à tous les onglets et les modifie en backgroundColor="#dddddd".

Puis il choisit l'onglet droit pour changer de couleur et la partie droite de la page pour apparaître.

Toutefois, lorsque je passe this en tant qu'argument (onclick="switchf('Home',this)"), il ne change pas de couleur (tab.style.backgroundColor = "#cccccc";).

Est-ce la bonne façon de passer this comme argument? J'ai pensé que ce serait le moyen le plus simple - mais je ne l'ai jamais utilisé auparavant et cela ne fonctionne pas dans cet exemple.

Comme toutes mes autres erreurs, c'est probablement une très simple, mais s'il vous plaît me le signaler.

Merci.

Answer 1

Le problème est que vous suivez la href, qui actualise la page. Ajoutez return false au gestionnaire en ligne pour empêcher cela.

<a href="?tab=1" id="t1" class="tab" onclick="switchf('Home',this); return false;">HOME</a> 

---

Ou tout simplement ajouter return avant l'appel de fonction, puis return false dans la fonction.

<a href="?tab=1" id="t1" class="tab" onclick="return switchf('Home',this);">HOME</a> 

function switchf(field,tab) { 
    var divs = ["Home","About","Chatroom","Account","Contact","Signup"]; 
    for(var j = 0; j < divs.length; j++) { 
     if(field != divs[j]) 
      document.getElementById(divs[j]).style.display = "none"; 
     else 
      document.getElementById(divs[j]).style.display = "block"; 
    } 

    var t = document.getElementsByClassName("tab"); 
    for(var i = 0; i < t.length; i++) { 
     t[i].style.backgroundColor = "#dddddd"; 
    } 

    tab.style.backgroundColor = "#cccccc"; 
    document.getElementsByTagName("title")[0].innerHTML = field; 

    return false; 
} 

Answer 2

Dans votre situation, this fait référence à l'objet qui contient l'attribut du gestionnaire d'événements.

this est l'une des fonctionnalités les plus utiles de JavaScript, et l'utiliser de la manière indiquée dans votre question est exactement ce pour quoi il a été conçu. L'autre fonction exécutée par le gestionnaire d'événements peut ainsi recevoir l'objet comme l'un de ses arguments. Je regarde votre code pour voir ce qu'il pourrait se passer d'autre. Mise à jour: Votre gestionnaire d'événements n'arrête pas le lien de soumission, ce qui signifie que votre page sera rechargée avec la chaîne de requête que vous avez spécifiée.

Vous avez deux options maintenant:

1. retour false dans votre gestionnaire d'événements pour empêcher le lien d'être suivi et la page rafraîchie. Comme ceci: onclick="switchf('Home',this); return false;"

2. permettent le lien à suivre et modifier votre gestionnaire d'événements à un analyseur-chaîne de requête qui change l'onglet actif en fonction de la chaîne de requête. (Cette solution serait préférable car elle permettrait aux visiteurs de voir un onglet spécifique directement à partir d'un lien externe sans avoir besoin de suivre le lien vers votre site, puis secondairement cliquez sur un certain onglet.)

post-scriptumVoici un code de la mine qui fait pratiquement la même chose et utilise les mêmes arguments que le code affiché:

http://jsfiddle.net/cookies/4JPJA/2/