jquery - jQuery this() の問題

Question

私は何かばかげたことをしているに違いありませんが、これを理解することはできません。なぜこのスクリプトは、<p>タグからのテキストを console.log(ing) しないのですか?

HTML:

<div>
    <label>Display Name:</label>
    <div>
        <p>The room that its in.</p>
        <span class="edit"></span>
    </div>
</div>

jQuery:

if ($('span.edit').length > 0) {
    $(this).click(function(){
        var elem = $(this).prev();
        var text = elem.text();
        console.log(text);
        elem.html('<input type="text">' + text + '</input>');
    });
}

score 4 · Accepted Answer

JavaScript はブロックスコープではありません。あなたは何thisになると思いますか？

修理済み：

if ($('span.edit').length > 0) {
    $('span.edit').click(function(){
        var elem = $(this).prev();
        var text = elem.text();
        console.log(text);
        elem.html('<input type="text" value="' + text + '" />');
    });
}

編集：html()入力ミスを修正するためにコンテンツを更新しました

score 1 · Accepted Answer

ここでの私の推測では、セレクターthisを参照する必要があります。span.edit

これはそうではありません。

長さがあるかどうかを確認する必要はありませんspan.edit。一致するものがない場合、クリックイベントはどの要素にもバインドされません。

したがって、コードは次のように簡略化できます。

$("span.edit").click(function(){
     var elem = $(this).prev();
     var text = elem.text();
     console.log(text);
     elem.html('<input type="text">' + text + '</input>');
});

score 0 · Accepted Answer

これはスパンを参照していないためです。ただし、以下のコードでは、スパンにバインドされます。

更新されたフィドル

$('.edit').click(function(){
    var elem = $(this).prev('p');
    var text = elem.text();
    elem.html('<input type="text">' + text + '</input>');
});

また、スパンは常にページに存在するため、長さを確認する必要はありません (少なくともフィドルでは)。さらに、それが存在しない場合、イベントはバインドされません。

score 0 · Accepted Answer

このifステートメントは不要です。そのような要素がない場合、クリックハンドラーは何もしません。ハンドラーをの中に入れても、その要素に一致するようifにのスコープは変更されません。直接thisターゲットにするだけです：<span>

$('span.edit').click(function(){
    var elem = $(this).prev();
    var text = elem.text();
    console.log(text);
    elem.contents().unwrap().wrap('<input type="text">');
});

jquery - jQuery this() の問題

4 に答える 4

Related

Reference