jquery - jQuery this() 问题

Question

小提琴

我一定是在做一些愚蠢的事情，但我真的想不通，为什么这个脚本不是 console.log(ing)<p>标记中的文本？

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>');
    });
}

Answer 1

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()内容以纠正输入错误

Answer 2

我的猜测是this应该指的是span.edit选择器。

不是这种情况。

您无需检查是否span.edit有长度。如果没有匹配项，click 事件将不会绑定到任何元素。

因此，您的代码可以像这样简化：

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

Answer 3

因为这不是指跨度。但是在下面的代码中，它将绑定到跨度：

更新的小提琴

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

此外，您不必检查长度，因为跨度始终存在于页面上（至少在小提琴中）。此外，如果它不存在，则该事件将不会被绑定。

Answer 4

该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">');
});