„this“ als Argument verwenden

Question

ich eine Onclick Funktion haben von einer „Seite“ zu einem anderen zu navigieren (es eigentlich nicht ist die Navigation, ahmt es gerade):

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

goTo Referenz vereinfacht:

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

Das funktioniert einwandfrei. Alle Navigationsschaltflächen haben die Klasse der Schaltfläche und eine ID, die dem Klassenname der verschiedenen "Seiten" entspricht. Klicken Sie auf # page1, display.page1, usw.

Mein Problem ist jetzt, ich muss meinen Code neu schreiben, um das gleiche für andere Elemente zu tun - versuchen, dies mit Argumenten neu zu schreiben, funktioniert dafür nicht besonders.

Hier ist, was ich versuche:

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

und nannte es als:

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

funktioniert gut, aber:

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

nicht.

Ich nehme an, ich verstehe nicht, wie "das" in diesem Zusammenhang funktioniert. Ich dachte, es würde nur bestimmen, was "das" ist, wenn das Argument aufgerufen wird.

Also meine Frage ist: kann "das" als ein Argument auf diese Weise verwendet werden, bin ich leicht mit der Logik oder bin ich ein kompletter Idiot?

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

Answer 1

ausdrücklich Ihre Frage zu beantworten, nein, kann this nicht als Argument in diesem Fall verwendet werden, da es so gut wie nichts hindeutet.

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

In diesem Zusammenhang this Punkte auf "undefiniert". Versuchen Sie console.log(this.id); im selben Umfang des oben erwähnten Codes laufen zu lassen und überprüfen Sie die Konsole Ihres Browsers. Es gibt "undefined" zurück.

Eine gute Möglichkeit zum Nachdenken über this ist, dass Sie etwas brauchen, um es zu referenzieren. Umfang zählt. Wenn es nichts gibt, worauf zu referenzieren, erhalten Sie immer "undefined" als Wert. Typischerweise wird this innerhalb einer Funktion verwendet, wo ein Objekt bereits zum Beispiel verwiesen wurde, in Ihren Event-Handler:

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

Dies wird in diesem Fall arbeiten, weil this zurück auf das Objekt beziehen, die auf betrieben wird, die .button-Klasse.