Question

如果你看一下这篇文章，你会发现它下面有一个“添加评论”链接。当我点击它时，将添加textarea并允许用户写评论。

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

更新

谢谢大家的帮助。

我制作了一个有效的代码。但是，如果它与谷歌浏览器一起运行，我将陷入可怕的延迟。我必须等待大约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

您可以点击“添加评论”链接调用jQuery函数。在函数中，您可以做两件事：

显示包含textarea的隐藏div。
将textarea附加到innerHTML属性的调用div。

Answer 2

简单示例：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属性，因此您还应该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; });

如果你想在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/

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');

});

如何编写这个JavaScript？

3 个答案: