このJavaScriptを書くには？

Question

この投稿を見ると、その下に「コメントを追加」リンクがあることがわかります。私がクリックすると、textareaが追加され、ユーザーはコメントを書くことができます。

どうすれば同様の機能を書くことができますか？

を更新しました

は、あなたの助けのためのみんなに感謝します。

私は作業コードを作成しました。しかし、それがGoogle Chromeで動作しているなら、私はひどく遅れを取るでしょう。私はtextareaを出すのに約15秒待たなければなりません。

しかし、私はIEでそれを実行し、全く問題はありません...それは非常に奇妙な問題です。ここで

は、JavaScriptの機能のための私のコードここ

function testCall(id) { 

var divName = "#Post-Number-" + id; 

var appenedDiv = "<div class='container2' id='r1'>"; 
appenedDiv+="<div class='acc_container'>"; 
appenedDiv+=" <div class='block'>"; 
appenedDiv += "<form method='post' action='' id='loginForm' name='loginForm'>"; 
appenedDiv+="<p>My Reply:</p>"; 
appenedDiv+="<p>"; 
appenedDiv += "<textarea id='test' name='txtReply' cols='8' rows='10'></textarea>"; 
appenedDiv += id; 
appenedDiv+="</p>"; 
appenedDiv+="<p>"; 
//appenedDiv+="<%= Html.ActionLink('Submit Reply', 'Login', 'User', new { returnUrl = Request.Url }, new { @class = 'linkButton' })%>"; 
appenedDiv+="</p>"; 
appenedDiv+="</form>"; 
appenedDiv+="</div>"; 
appenedDiv+="</div>"; 
appenedDiv += "</div>"; 

$(divName).after(appenedDiv); 
$('html, body').animate({ scrollTop: $('#r1').offset().top }, 100); 
//$('#test').focus(); 

}

私はあなたが追加」をクリックするだけでjQueryの関数を呼び出すことができ

<a href="#" onclick="testCall(<%:item.QAID %>);">Test</a> 

Answer 1

簡単な例：http://jsfiddle.net/zBUgZ/のjQueryを使用して

<a onclick="addComment(this)">add comment</a> 

function addComment(el){ 
    var t = document.createElement('textarea'); 
    document.body.appendChild(t); 
    el.style.display = 'none'; 
} 

：http://jsfiddle.net/zBUgZ/1/

<a class="addcomment">add comment</a> 

$('.addcomment').click(function(){ 
    $(this).after('<textarea class="comment"></textarea>').hide(); 
}); 

EDIT

それはANCHORは、HREF属性を持っていることをより多くの可能性がありますので、あなたがすべきまたreturn false：

<a class="addcomment" href="http://somelink.somewhere.com">add comment</a> 

$('.addcomment').click(function(){ 
    $(this).after('<textarea class="comment"></textarea>').hide(); 
    return false; 
}); 

そして、あなたは​​3210にIDを設定したい場合、あなたはANCHORに基づくものを使用することがあります：

<a id="addcomment1" class="addcomment" href="http://somelink.somewhere.com">add comment</a> 

$('.addcomment').click(function(){ 
    $(this).after('<textarea class="comment" id="'+this.id+'-textarea"></textarea>').hide(); 
    return false; 
}); 

http://jsfiddle.net/zBUgZ/2/

EDIT 2

そして、要素に集中しようとしていることに注目して、TEXTAREAにIDを追加すると、これを行うことができます：

平野Javascriptを：

document.getElementById(this.id+'-textarea').focus(); 

のjQuery：

$('#'+this.id+'-textarea').trigger('focus'); 

http://jsfiddle.net/zBUgZ/4/

Answer 2

この関数を呼び出す方法ですコメント "リンクをクリックします。この関数では、次の2つのことができます。

1. テキストエリアを含む非表示のdivを表示します。
2. 呼び出し側のdivにinnerHTMLプロパティのテキストエリアを追加します。

Answer 3

私はいくつかの検証がスタックオーバーフローでaddCommentボックスに、これは同じにするためにあるであろうと仮定します。

http://jsfiddle.net/CKzsn/

HTML

<div id="container"> 
    <a href="#" title="Add comment" class='addComment'>Add Comment</a> 
    <div class="hide"> 
     <textarea id="commentBox"></textarea> 
     <button> Submit </button> 
    </div> 
</div> 

のjQuery

$('.addComment').click(function(e) { 
    e.preventDefault(); 
    $(this).fadeOut(); 
    $(this).next('div').slideToggle(); 

}); 

$('button').click(function() { 
    $('.hide').fadeOut(); 
    var text = $('#commentBox').val(); 
    $('.addComment').fadeIn(); 
    $('<div class="comment">' + text + '</div>').insertBefore('.addComment'); 

});