Bestimmung von $(this) in jquery

Question

Ein häufiges Problem, das ich habe, ist, dass ich nicht weiß, worauf sich $(this) bezieht.

Ich versuche oft, ihm einen seltsamen Stil zu geben:

$(this).css("border","10px solid red")

Das hilft manchmal.

Ich bin jedoch mit der folgenden Frage überfordert. Meine Frage kann vielleicht auf zwei Arten beantwortet werden:

1) Gibt es eine universelle Möglichkeit zu "sehen", worauf sich $(this) in einer bestimmten Situation bezieht? Vielleicht in Kombination mit Firebug?

2) genauer gesagt, jede Idee, was $(this) sollte in diesem Beispiel unten beziehen? Ich nahm an, es wäre die Eingabe mit einer Klasse von btnSave gewesen, aber es scheint nicht zu sein:

$(ajaxContainer).find("input.btnSave").click(function(){
    savePanel();
});

function savePanel() {
    $(this).css("border","10px solid red");
};

Answer 1

1) Verwenden Sie die Konsole in Firebug:

var obj = $(this);
console.log(obj);

2) savePanel() wird nicht den richtigen Kontext haben, um $(this) zu verwenden. Sie könnten es versuchen:

$(ajaxContainer).find("input.btnSave").click(function(){
    $(this).css("border", "10px solid red");
});

Answer 2

Erste Frage (mit Firebug):

1. Platzieren Sie einen Haltepunkt irgendwo in dem Kontext, den Sie untersuchen wollen (z. B. innerhalb von savePanel() in Ihrem Beispiel).
2. Wenn Ihre Anwendung den Haltepunkt erreicht, fügen Sie $(this) zum Überwachungsfeld und erweitern Sie es, um seine Eigenschaften anzuzeigen.
3. Die erste Eigenschaft sollte sein "0" der dem ersten vom jQuery-Objekt gefundenen DOM-Knoten entspricht (in diesem Fall, this ).
4. Wenn Sie den Mauszeiger über den Wert für "0" wird Firebug diesen DOM-Knoten auf der Seite hervorheben. Wenn Sie auf den Wert klicken, wechselt Firebug zur Registerkarte HTML und scrollt zu diesem Element.

Zweite Frage:

• Innerhalb Ihrer anonymen Funktion, this verweist auf die <input /> Element.
• Im Inneren von savePanel() , this verweist auf die window Objekt.

Wenn Sie wollen savePanel() den Zugang zum <input /> Element gibt es verschiedene Möglichkeiten, dies zu tun. Die einfachste in Ihrem Fall wäre, es von der anonymen Funktion zu übergeben:

$(ajaxContainer).find("input.btnSave").click(function(){
  savePanel($(this));
});

function savePanel(inputElement) {
  inputElement.css("border","10px solid red");
}

Answer 3

In Ihrem Codebeispiel stoßen Sie auf ein klassisches JavaScript-Problem mit einem verlorenen Kontext für こん da der Aufruf einer anderen Funktion aus einer anonymen Funktion den Kontext der anonymen Funktion verliert ( Lesen Sie hier mehr darüber ). Wenn savePanel aufgerufen wird, wie Sie es tun, こん verweist auf das Fensterobjekt. Sie können den Kontext von こん vom Ereignisbehandler aus, indem Sie anrufen oder bewerben wenn Sie die Methode delegieren:

$(ajaxContainer).find("input.btnSave").click(function(){
    savePanel.call(this);
});

// OR

$(ajaxContainer).find("input.btnSave").click(function(){
    savePanel.apply(this, arguments);
});

function savePanel() {
    $(this).css("border","10px solid red");
};

Answer 4

"this" ist in Javascript oft eine Quelle der Verwirrung, weil es syntaktisch wie eine Variable aussieht und daher die Idee impliziert, dass man es weitergibt. Tatsächlich ist "this" eher eine Funktion und gibt immer den aktuellen Ausführungskontext zurück, d. h. den Kontext, für den die aktuelle Funktion aufgerufen oder auf den sie angewendet wurde.

Wenn ich mich nicht irre, versucht jquery, einen Callback in dem Kontext auszuführen, in dem der Callback-Binder aufgerufen wurde, d.h.

 object1.object2.object3.bindSomeCallback(function() {
        object3 will be "this" in the callback
 })