2

htmlを更新していくつかのリンクを作成するajax関数（関連するかどうかはわかりません）があります：

<a href="#" class="clickme" onclick="column_click()" title="my title">click me</a>

理由はわかりませんが、onclickすると、アラートを送信する$(this).attr('title')とが表示されundefined、アラートを送信すると表示され$(this)ます[window]

     function column_click(){
            value = $(this);
            console.log(value);

            thetitle= $(this).attr('title');
            console.log(thetitle);
        }

なぜこれが当てはまるのか誰かが知っていますか？

4

5 に答える 5

3

これで問題が解決するはずです。

onclick="column_click.call(this);"

その理由は、「クリックハンドラー」は実際には単なる関数だからです。デフォルトではthis、オブジェクトを参照しwindowます。

上記の私の例では、「実行して、要素を参照してcolumn_clickいることを確認してください。thisa

于 2012-11-14T05:13:27.993 に答える
2

*の概要this

JavaScriptで関数を実行する場合、デフォルトthisはwindowです。

function foo() {
    console.log(this);
}

foo(); // => window

this値はさまざまな方法で変更できます。1つの方法は、オブジェクトのメソッドとして関数を呼び出すことです。

var x = {
    foo: function() {
        console.log(this);
    }
};
x.foo(); // => This time it's the x object.

別の方法は、特定のオブジェクトのコンテキストで実行するように関数を使用callまたは指示することです。apply

function foo() {
    console.log(this);
}
foo.call(x); // => x object again
foo.apply(x); // => x object as well

あなたcallまたはapplyonnullまたはundefinedの場合、デフォルトの動作が再び発生します：関数は次のコンテキストで実行されますwindow：

function foo() {
    console.log(this);
}
foo.call(null); // => window
foo.apply(undefined); // => window

ただし、ECMAScript 5の厳密モードでthisは、デフォルトでウィンドウに設定されないことに注意してください。

(function() {

    'use strict';

    function foo() {
        console.log(this);
    }

    foo(); // => undefined
    foo.call(null); // => null
    foo.apply(undefined); // => undefined

})();

thisを使用bindして、呼び出される前に関数をオブジェクトにバインドすることで設定することもできます。

function foo() {
    console.log(this);
}

var bar = {
    baz: 'some property'
};

var foobar = foo.bind(bar);

foobar(); // => calls foo with bar as this

結論

このコードを使用しています：

<a href="#" class="clickme" onclick="column_click()" title="my title">click me</a>

つまり、リンクをクリックすると、が実行されcolumn_click();ます。つまり、column_click関数はメソッドではなくプレーン関数として実行されます。これは、（1）オブジェクトのプロパティとして呼び出されない（someobject.column_click();）、（2）callまたはapplyで呼び出されない、（3）で呼び出されないためbindです。厳密モードでは実行されていないため、デフォルトthisはwindowです。

問題を解決する方法

したがって、問題を解決するには、call（またはapply）を使用して、要素のコンテキストで実行するように関数に指示するだけです。属性値内の小さなコード内でthis、要素を参照します。したがって、を使用できますcolumn_click.call(this)。とても簡単です！

<a href="#" class="clickme" onclick="column_click.call(this);" title="my title">click me</a>

ただし、要素を引数として渡すだけの方がおそらく理にかなっています。

<a href="#" class="clickme" onclick="column_click(this);" title="my title">click me</a>

引数を受け入れるように関数を変更します。

function column_click(el) {
    // Use el instead of this...
}

* 技術を取得する

thisJavaScriptでは動的にスコープされます。この動作は、字句スコープが設定されている他のすべての変数とは異なります。他の変数には、関数の呼び出し方法に応じて異なるバインディングはありません。それらのスコープは、スクリプトに表示される場所から取得されます。ただし、動作は異なり、スクリプトのどこに表示されるかではなく、呼び出される方法thisに応じて、異なるバインディングを持つことができます。これは言語を学ぶ人々にとって混乱の原因となる可能性がありますが、熟練したJavaScript開発者になるためにはそれを習得する必要があります。

于 2012-11-14T05:13:56.707 に答える
2

column_click、の関数でパラメータを渡す必要があります

<a href="#" class="clickme" onclick="column_click(this)" title="my title">click me</a>



function column_click(obj){
        value = $(obj);
        console.log(value);
    }

注：オブジェクトthisを参照してください。windowだからあなたが期待するようには機能しません。

于 2012-11-14T05:14:48.083 に答える
2

JS/jQueryイベント処理の目立たないスタイルと目立たないスタイルを混同しています。onclick目立たないスタイルでは、属性ではなく、JavaScript自体でクリックハンドラーを設定します。

$('.clickme').on('click', column_click);

上記はthis、イベントの処理中にクリックされた要素に自動的にバインドされます。

ただし、これは標準のJavaScriptではありません。これはjQueryの機能です。このonメソッドは、イベントを処理するときに関数をHTML要素にバインドするのに十分スマートです。onclick="column_click"jQueryではないため、これは行いません。これは、デフォルトthisでグローバルオブジェクトにバインドする標準のJS動作を使用windowします。

ちなみに、表示される理由[window]は、jQueryオブジェクトに$(this)ラップされているため、オブジェクトが内部にwindowある配列のように見えます。window

問題に対処するには、主に3つの方法があります。

  1. 目立たないバインディングを使用する：$('.clickme').on('click', column_click);ページの最後のスクリプト、または$(document).readyハンドラーのどこかで
  2. this手動でバインド：onclick="column_click.call(this)"

  3. 使用thisを一切避けてください。

    function column_click(e) {
    var value = $(e.target);
    //...

これらのうち、優れたコーディングのために1または3のいずれかを強くお勧めします。

于 2012-11-14T05:28:54.487 に答える
0

jQueryを使用していますか？なぜだめですか：

$(".clickme").click(function() {
  value = $(this);
  console.log(value);

  thetitle= $(this).attr('title');
  console.log(thetitle);
});

// or

$(".clickme").click(column_click);
于 2012-11-14T05:16:13.183 に答える