jQuery `this` Umfang Ausgabe

Question

Ich habe eine globale Funktion in einem Ort definiert:

function addToCart(){ 
    var prodText = $(this).parent().siblings(".item1").text(); 
    $("#"+prodId+"shopC").children(".item1").text(prodText); 
    alert(prodText); 
} 

Dann will ich es in einem HTML-Elemente nennen mit einer Inline-onClick Veranstaltung: onClick='addToCart() '

Es funktioniert nicht, aber es funktioniert, wenn ich den Funktionscode direkt innerhalb des onClick Ereignisses setze, also muss ein this Bereichsproblem sein. Es gibt viele Fragen/Erklärungen über this Scope, aber ich muss gestehen, ich vermisse eine einfache, direkte Antwort für diesen speziellen Fall (Ich habe versucht, "use strict" mit Erfolg entweder zu verwenden). Wie funktioniert das?

Answer 1

Gemäß der aktuellen Implementierung bezieht sich this nicht auf das Element, das die Funktion aufgerufen hat. Es bezieht sich auf window Objekt.

Sie benötigen das aktuelle Element Kontext this d.h. der Funktion als

onClick='addToCart(this)' 

und modifizieren, um die Funktion zu übergeben Element als Parameter zu akzeptieren.

function addToCart (elem){ 
    var prodText = $(elem).parent().siblings(".item1").text(); 
    $("#"+prodId+"shopC").children(".item1").text(prodText); 
    alert(prodText); 
} 

Answer 2

Grundsätzlich this innerhalb einer Ebene Funktion zu window zeigen. Sie müssen den this Kontext an den Inline-Handler onClick='addToCart(this)' übergeben. Empfangen Sie es und verwenden Sie es innerhalb des Ereignishandlers wie unten.

function addToCart (_this){ 
    var prodText = $(_this).parent().siblings(".item1").text(); 

Answer 3

Sie haben dieses Schlüsselwort passieren, wo Sie die addToCart Funktion Inline-Aufruf dann können Sie

onClick='addToCart(this)' 

Answer 4

this Objekt in Ihrer Funktion dieses Elements erfassen verweist nicht auf das Objekt, in dem Sie hinzugefügt, um die onClick Funktion zu. Es zeigt eher auf das Objekt window.

Sie müssen this als Parameter an Ihre Funktion übergeben.

function addToCart (trigger) { // Code goes here } 

und rufen addToCart(this) in Ihrem onClick.

Erfahren Sie mehr über this in Javascript hier.