Javascript Girl
  1. Javascript Girl
  3. JSFIddle ne fonctionne pas avec Jquery
Intereting Posts
Quelles sont les méthodes pour lier et exécuter un fichier .exe local dans un navigateur local Comment transférer une variable Javascript vers Rails Controller? La boîte de dialogue jquery ui s'ouvre uniquement une fois Empêcher l'utilisation du bouton Retour (dans IE) Dropdown Box avec le groupe opt expansif Gestion de la demande annulée avec Express / Node.js et Angular RegEx – Match Character uniquement quand il n'est pas poursuivi ou suivi du même caractère Fonction non définie JSon appelle l'API à travers TVJS-tvOS Comment puis-je faire avancer les événements de la souris sur le défilement de la page? Fenêtre événementielle JavaScript. Pas disponible L'étiquette audio HTML5 sur Safari a un délai Jouez la vidéo de youtube en plein écran sur le bouton cliquez sur les navigateurs mobiles Phonegap deviceready ne lance pas avec Cordova 2.2.0 dans iOS Objet jQuery et élément DOM

JSFIddle ne fonctionne pas avec Jquery

Tout en travaillant sur une réponse à cette question, j'ai créé ce jsfiddle . Pour une raison quelconque, cela ne fonctionne pas, et quand j'ai utilisé la console d'erreur de Firebug, il revenait que ".show" n'est pas une fonction. Cela m'amène à croire que jsfiddle ne charge pas correctement jQuery. Existe-t-il des problèmes connus entre JSFiddle et jQuery? Est-ce que mon code est simplement incorrect (BTW quand je change .show("slow") à .style.display = "inherit" ça fonctionne bien, c'est pourquoi je pense qu'il doit y avoir un problème avec jQuery …)

Un laboratoire JSFiddle serait grandement apprécié.

Quelques questions:

  1. Vous avez oublié un } .
  2. Vous appelez les méthodes jQuery sur des éléments qui ne sont pas enveloppés dans un objet jQuery. Vous devriez faire: 
 $(itemName.getElementsByTagName("span")[0]).show("slow");

(Notez l'emballage). Les méthodes jQuery ne développent pas par magie les éléments par défaut, l'objet doit d'abord être enroulé.

Notez maintenant que cette version fonctionne .

EDIT :

Alternativement, vous pouvez utiliser le deuxième paramètre de construction de jQuery (scope) et raccourcir ce code: 

 function showy(itemName) { $('span:first',itemName).show("slow"); } function closy(itemName) { $('span:first',itemName).hide("slow"); }

EDITv2

Juan a soulevé un bon point, vous devriez également séparer javascript avec le balisage. Par cela, je veux dire éviter d'utiliser les attributs on * des éléments et conserver les liaisons dans le fichier .js externe ou les balises <script> . par exemple 

 <head> ... <script src="http://path.to/jquery.js"> <script> $(function(){ // execute once the document is ready (onload="below_code()") // bind to the buttons' hover events // find them by the "button" and "white" class names $('.button.white').hover(function(){ // hover event (onmouseover="below_code()") // find the first span within the link that triggered the event $('span:first',this).show('slow'); },function(){ // mouse out event (onmouseout="below_code()") // likewise, find first span $('span:first',this).hide('slow'); }); }); </script> ... </head> <body> ... <a href="#" class="button white" id="button1"> <span id="spanToShow">SHOW: this text&nbsp;</span> on hover </a> ... </body>

Je l'ai modifié pour cela: 

 function showy(itemName) { $(itemName).find("span").show("slow"); } function closy(itemName) { $(itemName).find("span").hide("slow"); }

Voir: http://jsfiddle.net/ttweX/

Je ne suis vraiment pas un fan de javascript obscurs: p

Vous devriez vous habituer à n'utiliser jamais les gestionnaires d'événements en ligne et à utiliser plutôt la liaison d'événement de jQuery.

Meilleure solution:

http://jsfiddle.net/ttweX/2/

Aussi, celui que possède Tomh fait de l'étrange ennui ennuyeux infini. 

 $(function(){ $('a.button').hover( function(){ $(this).find('span').show('slow'); }, function(){ $(this).find('span').hide('slow'); } ) });