質問
私のよくある問題は、$(this) が何を指しているのか混乱することです。
私はよくそれに奇妙なスタイルを与えようとします:
$(this).css("border","10px solid red")
それは時々役に立ちます。
ただし、次の点で困っています。私の質問には次の 2 つの方法で答えることができます。
1) 特定の状況で $(this) が何を指しているのかを「確認」する普遍的な方法はありますか?おそらくファイアバグとの組み合わせでしょうか?
2) より具体的には、以下のサンプルで $(this) が何を参照するべきか考えられますか?btnSave クラスの入力であると想定しましたが、そうではないようです。
$(ajaxContainer).find("input.btnSave").click(function(){
savePanel();
});
function savePanel() {
$(this).css("border","10px solid red");
};
解決
1)Firebugでコンソールを使用します:
var obj = $(this);
console.log(obj);
2)savePanel()には、$(this)を使用するための正しいコンテキストがありません。試すことができます:
$(ajaxContainer).find("input.btnSave").click(function(){
$(this).css("border", "10px solid red");
});
他のヒント
最初の質問(Firebugを使用):
- 調査するコンテキストのどこかにブレークポイントを置きます(例では
savePanel()
内)。 - アプリケーションがブレークポイントに到達したら、ウォッチパネルに
$(this)
を追加して展開し、プロパティを表示します。 - 最初のプロパティは
"0"
である必要があります。これは、jQueryオブジェクトと一致する最初のDOMノードに対応します(この場合、this
)。 -
<input />
の値にカーソルを合わせると、Firebugはページ上のそのDOMノードを強調表示します。値をクリックすると、FirebugはHTMLタブに切り替わり、その要素までスクロールします。
2番目の質問:
- 匿名関数の内部では、
window
は<=>要素を参照します。 - <=>の内部では、<=>は<=>オブジェクトを参照します。
<=>に<=>要素へのアクセスを許可する場合は、さまざまな方法があります。あなたの場合の最も簡単な方法は、無名関数から渡すことです:
$(ajaxContainer).find("input.btnSave").click(function(){
savePanel($(this));
});
function savePanel(inputElement) {
inputElement.css("border","10px solid red");
}
コードサンプルでは、コンテキストが失われるという古典的な JavaScript の問題に遭遇します。 これ, 、匿名関数から別の関数を呼び出すと、匿名関数からのコンテキストが失われるため (詳細についてはこちらをご覧ください)。あなたと同じようにsavePanelが呼び出されるとき、 これ ウィンドウオブジェクトを参照します。コンテキストを維持できます これ, を使用して、イベント ハンドラーから 電話または申し込み メソッドを委任する場合:
$(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");
};
<!> quot; this <!> quot; javascriptは、構文的に変数のように見えるため、混乱を招くことが多いため、Javascriptを渡すという考えを暗示しています。実際、<!> quot; this <!> quot;関数に似ており、常に現在の実行コンテキスト、つまり現在の関数が呼び出された、または適用されたコンテキストを返します。
間違っていない場合、jqueryはコールバックバインダーが呼び出されたコンテキストでコールバックを実行しようとします。つまり、
object1.object2.object3.bindSomeCallback(function() {
object3 will be "this" in the callback
})