jqueryで$(this)を決定する

StackOverflow https://stackoverflow.com/questions/1634017

  •  06-07-2019
  •  | 
  •  

質問

私のよくある問題は、$(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を使用）：

  1. 調査するコンテキストのどこかにブレークポイントを置きます（例ではsavePanel()内）。
  2. アプリケーションがブレークポイントに到達したら、ウォッチパネルに$(this)を追加して展開し、プロパティを表示します。
  3. 最初のプロパティは"0"である必要があります。これは、jQueryオブジェクトと一致する最初のDOMノードに対応します（この場合、this）。
  4. <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
 })
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top