jQuery: Comment passez-vous $ (this) comme paramètre de fonction?

Question

Tous les exemples jQuery que je vois ont des fonctions en ligne.

Si la fonction est assez longue, ou si la fonction est réutilisable, je peux vouloir séparer la fonction.

Par exemple, comment puis-je transformer cette

$('#myElement').click(function(){ 
    $(this).addCss('clicked'); 
}) 

dans quelque chose comme ça

$('#myElement').click(ElementClicked($(this)) 

function ElementClicked(???){ 
    ???.addCss('clicked'); 
} 

Merci!

Answer 1

Cela ne fonctionnera pas:

$('#myElement').click(ElementClicked($(this))); 

C'est d'exécuter la fonction ElementClicked() avec tout ce this est à la heure d'écriture et lie la valeur de retour de ElementClicked() à l'événement click. Ce qui dans ce cas n'est rien.

Vous aurez besoin de passe fonction à un événement de clic, comme ceci:

$('#myElement').click(function() { ElementClicked($(this)); }); 

Cela fait une fonction (n anonyme), qui sera lié à l'événement click, et la fonction appelle ElementClicked() lorsqu'il est exécuté, en passant this. La fonction ElementClicked peut être définie comme:

function ElementClicked(elem) { 
    elem.addClass('clicked'); 
} 

Comme vous remarquerez que, this dans la fonction qui est lié à l'événement sera l'élément cliqué. Ainsi, au lieu de faire une enveloppe de fonction qui appelle une fonction passage de l'élément, vous pouvez juste abrégez comme si:

$('#myElement').click(ElementClicked); 

function ElementClicked() { 
    $(this).addClass('clicked'); 
} 

Notez que la fonction est passée à click() comme une variable au lieu d'être exécutée immédiatement, parce qu'il ya pas de parenthèses () après. Et BTW, vous voulez probablement dire addClass au lieu de addCss.

Answer 2

C'est juste une expression; vous le passez comme si vous passiez (x + 1) ou autre. Donnez-lui un nom dans votre fonction et vous êtes bon pour aller:

function elementClicked(banana) { 
    banana.addClass('clicked'); 
} 

Answer 3

$('#myElement').click(function(){ 
    ElementClicked($(this)); 
}) 

function ElementClicked(el){ 
    el.addCss('clicked'); 
} 

Answer 4

il est préférable de séparer entre

Document

.elementByID ("div1")

$ ("# div1")

donc je préfère attatch 'j'

jElement = $ ("# div1")

element = document.elementByID ("div1")