Fonction JS dans la fonction ne se fait pas appeler

Question

J'ai ce que j'espère est une question très simple. En fait, je pense que c'est idiot de ne pas l'avoir compris. J'ai un exemple de mon code ici:

http://jsfiddle.net/joeljoelbinks/pVSDL/

extrait:

function lighten() { 

jQuery(this).css('opacity', '0.5'); 
jQuery(this).html('DO IT!'); 
} 

function darken() { 

jQuery(this).css('opacity', '1'); 
jQuery(this).html('CLICK TO EXPAND'); 
} 

function expand() { 

jQuery(this).off('click', expand); 
jQuery(this).off('mouseover', lighten); 
jQuery(this).on('click', contract); 
darken(); //this doesn't get called 
jQuery(this).animate({width: '200px', height: '200px'}, 500); 

} 

function contract() { 

jQuery(this).off('click', contract); 
jQuery(this).on('mouseover', lighten); 
jQuery(this).on('click', expand); 
lighten(); //this doesn't get called 
jQuery(this).animate({width: '100px', height: '100px'}, 250); 

} 

C'est un prototype simplifié d'une expansion conception div Je suis sur un site de mise en œuvre, je travaille sur. Tout fonctionne comme prévu sauf que les fonctions lighten() et darken() ne sont pas appelées à l'intérieur des fonctions expand() ou contract(). J'ai essayé plusieurs façons de les appeler à partir des fonctions, mais elles ne fonctionnent pas. Remarquez que je les ai laissés là juste pour vous montrer que c'est ce qui doit être réparé. Comment puis-je les déclencher dans les fonctions expand/contract? Ils fonctionnent comme liés aux événements mouseover/mouseout que j'ai codés au début, mais pas dans l'autre fonction. Si je leur fais exécuter une fonction alert(), alors ils fonctionnent dans tous les contextes mais pas si j'essaie de modifier JQuery (this) avec eux.

Question supplémentaire: aussi, regardez en haut de la js: comment lier les deux variables aux mêmes événements par opposition au code actuel où je dois les lier séparément? J'ai essayé bind() et plusieurs autres choses, mais je ne peux les amener à se lier quand je les fais séparément, ce qui est une violation des principes SECS;)

Answer 1

Vous devez vous assurer que this fait référence à la bonne chose:

darken.call(this); 

au lieu de

darken(); 

La valeur de this est déterminée sur chaque appel de fonction, vous devez vous assurer qu'il est correct à l'aide .call(). Vous pouvez également modifier vos fonctions darken() et lighten() afin qu'elles prennent un paramètre pour l'élément à affecter.

modifier — à votre « bonus », vous ne pouvez pas le faire sans autre fonction « sérialisation » les appels aux deux gestionnaires d'événements dont vous avez besoin de se lier à « cliquer » (ou autre). C'est certainement possible, mais c'est d'une valeur discutable. Vous pouvez toujours écrire une seule fonction pour appeler les deux fonctions en question (en prenant soin de transmettre explicitement this de manière appropriée).