Question

我正在尝试为YouTube创建类似的评论系统。单击按钮时，在评论下出现回复textarea的最简单方法是什么？我假设没有必要复制textarea并为每个评论设置display:none。

使用textarea

<div class="comment">
  <p>Bla bla</p>
  <a hred="" id="reply">Reply</a>
  <textarea class="reply"></textarea>   
</div>

没有textarea

<div class="comment">
  <p>Bla bla2</p>
  <a hred="" id="reply">Reply</a>
</div>

的jQuery

$('#reply').click(function(){

}

Answer 1

像

这样的东西

$('#reply').click(function(){
  $(this).parent().append($('<textarea>').attr('class','reply'));
});

应该做的。

Answer 2

取决于@ user1419007 answer。

它已经测试你是否已经在评论下有一个textarea。如果是这种情况，它将发送。

$('.reply').click(function(){
    if($(this).parent().find('textarea').length < 1) {
        $(this).parent().append($('<textarea>').attr('class','reply'));
    } else {
        alert('Sending: ' + $(this).parent().find('textarea').val());
    }
});

以下是JSFiddle

的示例

Answer 3

ID应该是唯一的，因此您不应该有多个#reply。相反，您可以为每个添加一个类。

<div class="comment">
  <p>Bla bla</p>
  <a hred="" class="reply-button">Reply</a>
</div>

$('.reply-button').click(function(){
  $(this).after($('<textarea>').attr('class','reply-box'));
});

回复评论YouTube风格

3 个答案: