当文本框失去焦点时，将文本框更改为文本框的值，然后再单击链接时再次更改

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/