$（これ）は "未定義"をスローしますが、これは意図したとおりに動作します

Question

2つのコードを考えてください。意図したとおり

1）動作：

$(function(){ 
    $('.menu li').on('click', function(){ 
    var choice = document.getElementById("choice"); 
    var text = this.textContent; 
     choice.textContent = text; 
    }); 
    }); 

2）ここで、$(this)は "未定義" スロー。

$(function(){ 
$('.menu li').on('click', function(){ 
var choice = document.getElementById("choice"); 
var text = $(this).textContent; 
    choice.textContent = text; 
}); 
}); 

私は、時間の長い期間のために選択された要素への参照として$(this)を使用してきました。しかし、今日は失敗しました。どうしましたか？ $(this)を忘れて、シンプルコードの数行でこのようなケースに直面することはありませんか？

Codepen

Answer 1

.textContentは、a DOM propertyであり、jQueryのプロパティまたはメソッドではありません。このため、jQuery要素の$(this)には存在しません。

あなたはそのように、jQueryの要素のうち、実際のDOMプロパティを取得するために$(this)[0]を使用することができます。

var text = $(this)[0].textContent; 

をしかし$(this)[0]のでその具体的な例ではそうない点はありませんthisに相当します。これは、他のケースでは意味をなさないかもしれません - 例えば、あなたが関数の引数としてjQueryの要素を取得する場合：

を：あなたはまた、そのように、要素のテキストコンテンツを取得または設定し the jQuery method .text()を使用することができます

function set_text(jqElem,txt) { jqElem[0].textContent = txt; } 

を

var text = $(this).text(); 

Answer 2

$（）jQueryのコンストラクタ関数です。

しかし、これは呼び出しのDOM要素への参照です。

$（this）、これをパラメータとして$（）に渡すだけで、jQueryのメソッドと関数を呼び出すことができます。