當文本框失去焦點時，將文本框更改爲文本框的值，然後再單擊鏈接時再次更改

Question

我正在創建一個專用消息系統，並且我想讓它以「到「字段，然後當你第一次點擊它（它以文本框開始）時，它會變成如下這樣的鏈接： POC0bob（編輯），當你點擊用戶名時，它會帶你到他們的配置文件在一個空白選項卡中，當您單擊編輯時，它會全部返回到文本框。

Link to jsfiddle with what I have so far.

$(document).ready(function() { 
$('a.edit').click(function() { 
    var dads = $(this).parent().parent(); 
    var dad = $(this).parent(); 
    dads.find('label').hide(); 
    dad.find('editusnm').hide(); 
    dads.find('input[type="text"]').show().focus(); 
}); 

$('input[type=text]').focusout(function() { 
    var dad = $(this).parent(); 
    $(this).hide(); 
    dad.find('label').show(); 
}); 

}）;我用sorta偷了那個代碼，並從另一個stackoverflow問題編輯它，但它沒有多大幫助。

這是我有的基本想法，但我需要的文本框和鏈接改變基於彼此的價值。

Answer 1

您可以通過更新事件的內容功能，這種變化對事件的內容鏈接的文本和href屬性：

$('input[type=text]').focusout(function() { 
    var dad = $(this).parent(); 
    $(this).hide(); 
    dad.find('label').show(); 
    // Get username 
    var username = $(this).val(); 
    // Set the jQuery object to a variable so we're not getting it twice 
    var $usernamelink = $('#username'); 
    // Set the link text to the text box value 
    $usernamelink.text(username); 
    // Set the link href incorporating the textbox value 
    $usernamelink.attr("href", "/Profile/?user=" + username + ""); 
}); 

然後，一個ID添加到您的錨：

<p class="text-info"><a id="username" href="/Profile/?user=[Username]">Username</a></p> 

看到這個小提琴：http://jsfiddle.net/j2sgdx22/