5

私が抱えている一般的な問題は、 $(this) が何を指しているのか混乱することです。

私はしばしばそれにいくつかの奇妙なスタイルを与えようとします:

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

これは時々役立ちます。

しかし、私は次のことに困惑しています。私の質問には、次の 2 つの方法で答えることができます。

1) 任意の状況で $(this) が参照しているものを「見る」普遍的な方法はありますか? おそらくfirebugと組み合わせて？

2) より具体的には、以下のサンプルで $(this) が何を参照する必要があるか考えていますか? 私はそれが btnSave のクラスの入力だったと思いましたが、そうではないようです:

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

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

4 に答える 4

9

1) Firebug でコンソールを使用します。

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

2) savePanel() には、$(this) を使用するための正しいコンテキストがありません。あなたは試すことができます：

$(ajaxContainer).find("input.btnSave").click(function(){
    $(this).css("border", "10px solid red");
});
于 2009-10-27T22:29:44.627 に答える
4

最初の質問 (Firebug を使用):

  1. 調査したいコンテキストのどこかにブレークポイントを配置します (たとえば、例の内部savePanel())。
  2. アプリケーションがブレークポイントに到達したら$(this)、ウォッチ パネルに追加して展開し、そのプロパティを表示します。
  3. 最初のプロパティは である必要があります"0"。これは、jQuery オブジェクト (この場合は ) によって一致する最初の DOM ノードに対応しますthis。
  4. の値"0"にカーソルを合わせると、Firebug はページ上のその DOM ノードを強調表示します。値をクリックすると、Firebug は HTML タブに切り替わり、その要素までスクロールします。

2 番目の質問:

  • 無名関数の内部ではthis、要素を参照し<input />ます。
  • の中ではsavePanel()、オブジェクトthisを参照しwindowます。

savePanel()要素にアクセスしたい場合<input />は、さまざまな方法があります。あなたのケースで最も簡単なのは、匿名関数から渡すことです。

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

function savePanel(inputElement) {
  inputElement.css("border","10px solid red");
}
于 2009-10-27T22:30:24.257 に答える
1

コードサンプルでは、​​無名関数から別の関数を呼び出すと無名関数からコンテキストが失われるため、このためのコンテキストが失われるという古典的なJavaScriptの問題が発生します（詳細については、こちらを参照してください）。あなたのようにsavePanelが呼び出されると、これはウィンドウオブジェクトを参照します。メソッドを委任するときにcallまたはapplyを使用することにより、イベントハンドラーからこのコンテキストを保持できます。

$(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");
};
于 2009-10-27T22:34:31.323 に答える
0

「これ」はJavaScriptであり、構文的には変数のように見え、それを渡すという考えを暗示しているため、混乱の原因となることがよくあります。実際、「this」は関数に似ており、常に現在の実行コンテキスト、つまり現在の関数が呼び出された、または適用されたコンテキストを返します。

私が間違っていない場合、jqueryはコールバックバインダーが呼び出されたコンテキストでコールバックを実行しようとします。

 object1.object2.object3.bindSomeCallback(function() {
        object3 will be "this" in the callback
 })
于 2009-10-27T22:39:14.707 に答える