En utilisant « cette » comme argument

Question

J'ai une fonction onclick pour naviguer d'une « page » à un autre (il est pas vraiment naviguer, juste imite):

$('.button').on('click', function(){ 
    $('.home').css('display','none'); 
    var newPage = $('.'+this.id); 
    goTo(newPage); 
}); 

goTo simplifié pour référence:

function goTo(page){ 
$(page).css('display', 'block'); 
} 

Cela fonctionne parfaitement bien. Tous les boutons de navigation ont la classe de bouton, et aussi un ID qui correspond au nom de classe des différentes "pages". Cliquez sur # page1, afficher .page1, etc.

Mon problème est maintenant que je dois réécrire mon code pour faire la même chose pour les autres éléments - essayer de réécrire cela avec des arguments ne fonctionne pas pour cela en particulier.

Voici ce que je suis en train:

function goToPage(link, destination){ 
link.click(function(){ 
    $('.home').css('display','none'); 
    goTo(destination); 
} 
} 

et de l'appeler comme:

goToPage($('#page1'), $('.page1')); 

fonctionne très bien, cependant:

goToPage($('.button'), $('.'+this.id)); 

ne fonctionne pas. Je suppose que je ne comprends pas comment "ceci" fonctionne dans ce contexte. Je pensais que cela ne déterminerait que ce que "ceci" est quand l'argument est appelé. Donc, ma question est la suivante: est-ce que "ceci" peut être utilisé comme argument de cette façon, suis-je légèrement en dehors de la logique ou suis-je un idiot complet?

Fiddle: https://jsfiddle.net/hek0ptca/13/

Answer 1

Pour répondre explicitement à votre question, non, this ne peut pas être utilisé comme argument dans ce cas parce qu'il fait rien.

goToPage($('.button'), $('.'+this.id)); 

Dans ce contexte, this des points à "non défini". Essayez d'exécuter console.log(this.id); à la même portée du code mentionné ci-dessus et vérifiez la console de votre navigateur. Il renvoie "indéfini".

Une bonne façon de penser à this, c'est que vous avez besoin de quelque chose pour qu'il fasse référence. La portée compte. S'il n'y a rien à référencer, vous aurez toujours "indéfini" comme valeur. En règle générale this est utilisé dans une fonction où un objet a déjà été référencé, par exemple, dans votre gestionnaire d'événements:

$('.button').click(function(){ 
    $('#home').css('display', 'none'); 
    goTo($('.'+this.id)); 
}); 

Cela fonctionne dans ce cas parce que this se référer à l'objet qui est opéré, la classe .button.