將元素從跨度更改爲輸入

Question

我正在嘗試將span域的類型更改爲select上的輸入域。目前我發現代碼在單擊元素本身時會更改元素，但我試圖找出在單擊另一元素時更改該元素的方法。

這裏是當前小提琴我在：http://jsfiddle.net/2D9FW/281/

<span class="loadNum">5566</span><a class="editrow" style="display: 
float-left"data-value=""> clickme</a> 
<br /> 
<span class="loadNum">5566</span><a class="editrow" style="display: 
float-left"data-value=""> clickme</a> 



    var switchToInput = function() { 
    var $input = $("<input>", { 
     val: $(this).text(), 
     type: "text" 
    }); 
    $input.addClass("loadNum"); 
    $(this).replaceWith($input); 
    $input.on("blur", switchToSpan); 
    $input.select(); 
}; 
var switchToSpan = function() { 
    var $span = $("<span>", { 
     text: $(this).val() 
    }); 
    $span.addClass("loadNum"); 
    $(this).replaceWith($span); 
    $span.on("click", switchToInput); 
} 
$(".loadNum").on("click", switchToInput); 

Answer 1

你可以使用jQuery .prev()來實現你在找什麼

試試這個

var switchToInput = function() { 
    var $input = $("<input>", { 
     val: $(this).prev('.loadNum').text(), 
     type: "text" 
    }); 
    $input.addClass("loadNum"); 
    $(this).prev('.loadNum').replaceWith($input); 
    $input.on("blur", switchToSpan); 
    $input.select(); 
}; 

檢查Fiddle