1. Accueil
  2. Question et réponse
  3. Pourquoi la fonction jQuery showHide() n'est-elle pas définie?

Pourquoi la fonction jQuery showHide() n'est-elle pas définie?

2014-07-19 4 views
0

Je suis vraiment nouveau à essayer d'utiliser jQuery, alors s'il vous plaît pardonnez-moi de demander ce qui est probablement une question simple. Peut-être que ce n'est même pas lié à jQuery, mais de toute façon, voici le scénario. J'essaie de mettre dans un div caché que je veux seulement montrer quand l'utilisateur passe sa souris sur l'étiquette d'ancrage de l'apprenant sur la page. J'ai commencé avec une seule balise d'ancrage, pour la faire fonctionner avant d'implémenter le reste d'entre eux. J'ai téléchargé une bibliothèque jQuery et inclus une référence à elle, voici donc une partie de ce que j'ai dans ma page de section de la tête:Pourquoi la fonction jQuery showHide() n'est-elle pas définie?

<script src="js/jquery-1.11.1.js" type="text/javascript" ></script> 
<style type="text/css"> 
#navcontainer ul { list-style-type: none; } 
#navcontainer ul li { display: inline; } 
#navcontainer ul li a 
{ 
text-decoration:none; 
padding: .2em 1em; 
} 
</style>

Ensuite, j'ai défini une liste non ordonnée, en utilisant le style ci-dessus pour le rendre horizontal, et j'ai un div caché après, que je veux montrer quand l'utilisateur déplace sa souris sur la première ancre dans la liste non ordonnée. Voici le code HTML correspondant à partir de la balise body:

<body> 
<div id="navcontainer"> 
<ul> 
<li><a href="index.htm">Home</a></li> 
<li><a href="#" onmouseout="showHide('dropdown1', false)" onmouseover="showHide('dropdown1', true); return false;">Learners</a></li> 
<li><a href="#">Teachers</a></li> 
<li><a href="#">Businesses</a></li> 
<li><a href="#">Contact Us</a></li> 
</ul> 
<div id="dropdown1" style="visibility:hidden;"> 
<ul> 
<li><a href="PDFs/Learners/CloStringMap.pdf">Description A</a></li> 
<li><a href="PDFs/Learners/VlaStringMap.pdf">Description B</a></li> 
<li><a href="PDFs/Learners/VlnStringMap.pdf">Description C</a></li> 
</ul> 
</div> 
<!-- other HTML code --> 
</body>

Cependant, quand je lance ce à partir du navigateur rien (IE11) arrive. En utilisant les outils de développement web F12 intégrés dans IE11, j'apprends qu'il donne une erreur de "showHide is undefined". Pourquoi fait-il ça? La fonction showHide() est certainement dans le fichier jquery-1-11.1.js, qui est certainement dans mon dossier js. Qu'est-ce que j'ai mal fait, ou omis de prendre en compte?

Source

2014-07-19 Rod

+1

vous manque la partie la plus importante: balise ''

1

Il n'y a pas une telle fonction que showHide vous pouvez utiliser toggle() ou show() ou hide() en vous scénario actuel uou serait coupler avec $ (ce). ou votre sélecteur choisi. Comme exemple de ciblage d'un élément particulier avec jQuery, nous avons ajouté la classe hover-learners et la cible avec le sélecteur ci-dessous.

HTML:

<div id="navcontainer"> 
    <ul> 
     <li><a href="index.htm">Home</a> 

     </li> 
     <li><a href="#" class="hover-learners">Learners</a> 

     </li> 
     <li><a href="#">Teachers</a> 

     </li> 
     <li><a href="#">Businesses</a> 

     </li> 
     <li><a href="#">Contact Us</a> 

     </li> 
    </ul> 
    <div id="dropdown1"> 
     <ul> 
      <li><a href="PDFs/Learners/CloStringMap.pdf">Description A</a> 

      </li> 
      <li><a href="PDFs/Learners/VlaStringMap.pdf">Description B</a> 

      </li> 
      <li><a href="PDFs/Learners/VlnStringMap.pdf">Description C</a> 

      </li> 
     </ul> 
    </div>

Ajouter le javascript ci-dessous sous forme de fichier ou dans <script type="text/javascript"> code here</script> après y compris votre fichier de bibliothèque jQuery.

Javascript:

// envelopper tout en fonction prêt jQuery pour vous assurer que la page est complètement chargée avant d'exécuter le javascript

$(document).ready(function() { 

    //select learners and apply mouseover event 
    $('.hover-learners').on('mouseover', function() { 
     $('#dropdown1').show(); 
    }); 

    //select learners and apply mouseout event 
    $('.hover-learners').on('mouseout', function() { 
     $('#dropdown1').hide(); 
    }); 

});

En outre, depuis les méthodes show et hide manipuler la propriété display CSS I ont ajouté

CSS:

#dropdown1 { 
    display:none; 
}

et retirez la ligne style="visibility:hidden" de la #dropdown1

travail démo ici: http://jsfiddle.net/robschmuecker/J6U7d/

Source

2014-07-19 17:26:15

+0

Mais il existe une telle fonction dans le fichier jquery-1.11.1.js. Voici le début de la fonction: fonction showhide (éléments, show) { \t affichage var, élém, caché, \t \t valeurs = [], \t \t index = 0, \t \t longueur = elements.length; \t pour (; index Rod

+0

Je me demande si je dois mettre un tag de forme dans la page, et mettre tout mon code, en particulier le code qui utilise JavaScript/jQuery dans la balise de formulaire? Je dessine des pailles que je connais, mais je suis perplexe. – Rod

+0

Une étiquette de formulaire n'est certainement pas nécessaire. J'ai mis à jour la réponse. –

Questions connexes

 Questions connexes