javascript - いくつかの要素をクリックした後にjQuery関数を呼び出す

Question

ここにHTMLコードがあります

<p onclick='javascript:func(this);'>Bla bla bla</p>

これがスクリプトです（ドキュメントの頭に書かれています）。

function func(e) {
  var t = e.text();
  console.log(t);
}

うまくいかず、その理由がわかりません。エラーメッセージは、「オブジェクト # にはメソッド 'text' がありません」です。

score 5 · Accepted Answer

jQuery ラッパーでラップします。.text()は jQuery メソッドであり、要素eはプレーンな Javascript DOM 要素であるため、jQuery ラッパーが必要です。

var t = $(e).text();

補足: 控えめなイベントハンドラーの割り当ては、インラインハンドラーよりも優先されます。例えば：

$(document).ready(function(){
    $('p').click(function(){
        var t = $(this).text();
        console.log(t);
    });
});

上記では jQuery を使用して (インライン Javascript の代わりに) クリックハンドラーを割り当てているthisため、プレーンな Javascript オブジェクトまたは$(this)jQuery オブジェクトで要素にアクセスできます。

score 0 · Accepted Answer

これはプレーンな JavaScript であり、要求したことを実行します。

function func(e) {
  var t = e.innerHTML;
  console.log(t);
}

score 0 · Accepted Answer

使用してみてくださいinnerHTML：

function func(e) {
    var t= e.innerHTML;
    console.log(t);
}

score 0 · Accepted Answer

jquery を使用innerTextしない場合に使用します。

function func(e) {
  var t = e.innerText;
  console.log(t);
}

score 0 · Accepted Answer

正しい方法は次のとおりです。

HTML:

<p onclick='func(this);'>Bla bla bla</p>

それ以外の

<p onclick='javascript:func(this);'>Bla bla bla</p>

Javascript:

function func(e) {
    var t = e.innerHTML;
    console.log(t);
}

score 0 · Accepted Answer

Jquery は目立たないように設計されています。どこにでもonclick属性を追加すると、間違っています。

代わりに、イベントリスナーを追加する必要があります

<p>Blah Blah Blah</p>

Jquery/スクリプト

$(document).ready(function(){
    $('p').on('click', function(){
        console.log($(this).text());
    });
});

6 に答える 6