jquery - 这个JavaScript怎么写呢？

Question

如果您查看这篇文章，您会看到其下方有一个“添加评论”链接。当我点击它时，将添加一个 textarea 并允许用户编写评论。

我想知道如何编写类似的函数？

已更新

感谢大家的帮助。

我编写了一个工作代码。但是，如果它与 Google Chrome 一起运行，我会遇到严重的延迟。我必须等待大约 15 秒才能取出 textarea。

但是如果我用 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();

}

这是我如何调用这个函数

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

Answer 1

简单示例:http://jsfiddle.net/zBUgZ/

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

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

使用 jQuery:http://jsfiddle.net/zBUgZ/1/

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

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

编辑

由于 ANCHOR 更有可能具有 HREF 属性，因此您还应该返回 false:

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

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

如果您想在 TEXTAREA 上设置 ID，您可以使用基于 ANCHOR 的 ID:

<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/

编辑2

并且，请注意您正在尝试将注意力集中在元素上，如果您向 TEXTAREA 添加 ID，则可以执行此操作:

纯 JavaScript:

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

jQuery:

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

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