J'essaie de créer une liste de lecture multimédia capable de faire avancer les crédits, de lire la vidéo et de modifier le titre sur le thumb-Hover, la fin de la vidéo et le prochain / prev click. J'ai donc besoin d'écrire certaines fonctions qui peuvent ensuite être appelées ensemble. Donc, comme ceci:
function showBox() { $(this).parents('.container').find('.box').show(); }; function hideBox() { $(this).parents('.container').find('.box').hide(); }; $('a').hover( function() { showBox(); }, function() { hideBox(); } );
6 Réponses :
Réponse de @ Patrickdw, JQuery définit la portée d'un rappel pour un événement à l'élément DOM sur lequel l'événement a été licencié. Par exemple, voir le paramètre ma réponse originale (ci-dessous) est utile lorsque vous souhaitez créer un plug-in jQuery afin que vous puissiez appeler vos propres méthodes personnalisées sur les objets JQuery et avoir l'objet JQuery définir comme edit strong>: Ou, si (comme suggéré), vous souhaitez ajouter un seul nom à l'espace de noms de la méthode ~ global jQuery Méthode: p> ou plus généralement: p> Pour plus d'informations, reportez-vous au Guide de création de plug-in jquery . P> p> eventObject code> dans la documentation du
Cliquez sur () < / code>
gestionnaire. ceci code> pendant l'exécution. Cependant, il est
+1 - C'est une autre excellente approche qui ne nécessite pas la fermeture. Bonne réponse.
La belle façon de le faire. Bien que pour l'enregistrement, des directives pour les plugins demandent généralement une incursion d'un espace de noms unique. Donc, .Lebox ('Open') / .thebox ('Fermer') Code> serait plus à REGS.
Excellent point, @orbling. Je pense que cette ligne directrice est totalement judicieuse lors de l'emballage de son propre code pour un plugin, mais peut-être violable pour un script autonome. J'ai mis à jour ma réponse pour montrer une façon de le faire.
@Phrogz: Aye, je suis tout à fait d'accord. Comme la question ressemblait à celle-ci était susceptible d'être une partie d'une entreprise beaucoup plus importante que je pensais la jeter.
C'est de grands gars. Je vais faire beaucoup de fonctions (comme le nextCredit, PrevCredit, SuntiTle, PrevtiTle), comment puis-je traiter avec l'espace de noms alors?
@ Arewbaker J'utiliserais probablement un commutateur (cmd) {...} code> pour gérer diverses commandes disparates au lieu du piratage mignon que j'ai montré ci-dessus.
Vous devez modifier votre code à quelque chose comme ceci:
function showBox(elem) { elem.parents('.container').find('.box').show(); }; function hideBox(elem) { elem.parents('.container').find('.box').hide(); }; $('a').hover( function() { var $this = $(this); showBox($this); }, function() { var $this = $(this); hideBox($this); } );
Cela ne fonctionnera pas. Hover (Hoveroverfn, Hoverofffn) Code> - Déplacez peut-être la reliure à l'extérieur, mais je ne suis pas vraiment clair ce que la question demande :-)
@pst - Je l'ai attrapé comme je l'ai relu, mis à jour pour définir correctement la variable.
@GDDC maintenant qu'il n'y a pas besoin de le mettre en cache, que diriez-vous de showbox ($ (this)); code>
Ajouter des paramètres à Showbox CODE> et
HIDEBOX CODE> afin qu'ils puissent accepter l'élément, puis appeler
showbox ($ (ceci)) code> et < Code> Hidebox ($ (this)) code>. p>
$('a').hover(function() { $(this).closest('.container').find('.box').show(); }, function() { $(this).closest('.container').find('.box').hide(); });
Le Ce code> portera via si vous venez de le faire:
function alertMe() {
alert( this.tagName );
}
$('a').bind('click', alertMe );
Ah bon? Ce serait la meilleure façon de penser. Cela fonctionnerait-il pour .Cliquez-vous aussi des événements?
@ Greatw: Absolument. : o) Il s'agit simplement d'attribuer vos fonctions directement sous forme de gestionnaires, et à tout moment, un gestionnaire est appelé, la valeur de ceci code> dans le gestionnaire sera l'élément qui a reçu l'événement.
Eh bien, c'est la meilleure façon de faire ce que j'essaie de faire à coup sûr! Y a-t-il des descentes à cela? Comment se fait-il que toutes ces autres personnes ne suggèrent pas cela? Cela semble si facile!
@Drew: pas de descente. C'est l'approche la plus simple. La solution de @ Šime Vidas est effectivement la même, sauf qu'il remplace vos fonctions nommées avec des personnes anonymes. Je suppose que vous voulez qu'ils nommés pour une raison. Franchement, je pense que c'est une bonne idée d'utiliser des fonctions nommées au lieu des anonymes. Ajoute de la clarté. Je ne sais pas pourquoi ce n'était pas suggéré. L'exemple de plug-in qu'un autre utilisateur a donné semble seulement ajouter une complexité et une surcharge aérienne sans aucun avantage réel. Les solutions qui transmettent une forme de ce code> comme paramètre ajoute également des frais généraux sans avantage.
+1 Je suis ... choqué et consterné que je ne reconnais pas cela comme le cas.
@Phrogz: Je dois dire que j'étais un peu surpris que vous et @ Šime n'avait pas offert cette solution au moment où je suis arrivé. Donc j'étais heureux de le jeter dans le mélange. ; o)
@Trewbaker Veuillez accepter la réponse de Patrickdw ici comme le bon; Je ne suis pas sûr de supprimer le mien ou non, car il est utile de connaître les plug-ins et la capacité d'étendre des objets JQuery. Cette réponse est cependant clairement la bonne. Je vais éditer ma réponse pour noter ceci.
@Phrogz: Je ne pense pas qu'il soit nécessaire de supprimer le vôtre. C'est certainement une solution correcte et de travail.
@Phrogz: Je pense que le vôtre pourrait réellement être plus utile dans ma situation. Que faites-vous lorsque vous devez exécuter plusieurs fonctions à la fois? Comme $ ('a'). Cliquez sur (Dothis, Andthis, Onemoretime)?
@ Greatker Vous pouvez soit $ ('a'). Cliquez sur (Dothis) .Cliquez sur (and this); code> ou vous pouvez
$ ('a'). Cliquez sur (Fonction () {Ceci. Dothis (); cela.AltHis ();}); code> Ce dernier est plus gênant de taper, mais mieux performant, car il crée moins de gestionnaires d'événements.
@Phrogz: $ ('a'). Cliquez sur (Fonction () {this.dothis (); ceci.andthis ();}); retourne "this.dothis () n'est pas une fonction" en Firebug. En outre, je ne pense pas $ (ceci) porterait de cette façon. La solution de multiples manutes d'événements pourrait être la meilleure façon de le faire.
@Trewbaker bah, stupide moi. $ ('a'). Cliquez sur (Fonction () {Dothis.call (this); andCe.call (this);}); code> ou si vous avez besoin de l'objet d'événement:
$ ( 'A'). Cliquez sur (Fonction (E) {Dothis.call (Ceci, E); Andthis.Call (Ceci, E);}); Code>
@Phrogz: bonne réponse! Merci. Je n'aurais jamais pensé utiliser le .call!
En JavaScript, vous pouvez utiliser le premier paramètre donné à appel () code >
ou Apply () code> < / a> pour exécuter une fonction et spécifier explicitement
ceci code> pour celui-ci:
appel () code> Spécifie l'objet que
ceci code> se référera à la fonction. Tous les paramètres supplémentaires sont utilisés comme paramètres dans l'appel de la fonction. P> p>