的jQuery（）這個問題

Question

Fiddle

我必須做一些愚蠢的事，但我真的不知道這一點，這是爲什麼腳本不要CONSOLE.LOG（荷蘭國際集團）從<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是否有長度。如果沒有匹配，則單擊事件將不會被綁定到任何元素。

因此您的代碼可以簡化如下：

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

Answer 3

，因爲這並不是指跨度。然而，在下面的代碼將被綁定到跨度：

Updated fiddle

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

也，你不必來檢查長度跨度一直在撥弄目前在頁面上（ATLEAST ）。此外，如果它不存在，事件就不會受到約束。

Answer 4

if語句是不必要的 - 如果沒有這樣的元素，click處理程序什麼都不做。將處理程序放入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">'); 
});