determinare $ (questo) in jquery

Question

Un problema comune che ho è confondere ciò a cui $ (questo) si riferisce.

Cercherò spesso di dargli uno stile strano:

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

Il che aiuta a volte.

Sono comunque sconcertato dal seguente. Alla mia domanda forse si può rispondere in due modi:

1) esiste un modo universale per "vedere" a quale $ (questo) si riferisce in una determinata situazione? Forse in combinazione con firebug?

2) più specificamente, hai idea di cosa $ (questo) dovrebbe fare riferimento in questo esempio di seguito? Ho pensato che sarebbe stato l'input con una classe di btnSave ma non sembra essere:

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

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

Answer 1

1) Usa la console in Firebug:

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

2) savePanel () non avrà il contesto corretto per usare $ (questo). Puoi provare:

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

Answer 2

Prima domanda (utilizzando Firebug):

1. Posiziona un punto di interruzione da qualche parte nel contesto che desideri esaminare (ad es. all'interno savePanel() nel tuo esempio).
2. Quando l'applicazione raggiunge il punto di interruzione, aggiungi $(this) al pannello dell'orologio ed espanderlo per visualizzarne le proprietà.
3. La prima proprietà dovrebbe essere "0", che corrisponde al primo nodo DOM corrispondente all'oggetto jQuery (in questo caso, this).
4. Se passi il mouse sopra il valore per <input />, Firebug evidenzierà quel nodo DOM sulla pagina. Se fai clic sul valore, Firebug passerà alla scheda HTML e scorrerà fino a quell'elemento.

Seconda domanda:

• All'interno della tua funzione anonima, window farà riferimento all'elemento <=>.
• All'interno di <=>, <=> farà riferimento all'oggetto <=>.

Se vuoi che <=> abbia accesso all'elemento <=>, ci sono molti modi per farlo. Il più semplice nel tuo caso sarebbe passarlo dalla funzione anonima:

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

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

Answer 3

Nel tuo esempio di codice ti imbatti in un classico problema JavaScript con un contesto perso per questo , dal momento che chiamare un'altra funzione da una funzione anonima perderà il contesto dalla funzione anonima ( leggi di più qui ). Quando savePanel viene chiamato come te, this farà riferimento all'oggetto window. Puoi mantenere il contesto di questo , dal gestore dell'evento, usando chiamare o applicare durante la delega del metodo:

$(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

&

quot; & Questo quot; javascript è spesso fonte di confusione, perché sintatticamente appare come una variabile e quindi implica l'idea di passarla in giro. In realtà, & Quot; questo & Quot; è più simile a una funzione e restituisce sempre il contesto di esecuzione corrente, ovvero il contesto a cui è stata richiesta o applicata la funzione corrente.

Se non sbaglio, jquery tenta di eseguire un callback nel contesto in cui è stato chiamato il raccoglitore callback, ovvero

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