テキストフィールドをフォーカスが失われたときにテキストフィールドの値に変更し、リンクをクリックしたときに再び戻す

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

}）。

私はそのコードを盗んで、別のstackoverflowの質問から編集しましたが、あまり役に立たなかったです。

これは基本的なアイデアですが、お互いの価値に基づいて変更するにはテキストボックスとリンクが必要です。

Answer 1

あなたはこれにfocusout機能を更新することによりfocusout上のテキストやリンクの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/