javascript - コメントへの返信 YouTube スタイル

Question

YouTube と同様のコメント システムを作成しようとしています。textareaボタンをクリックしたときにコメントの下に返信を表示する最も簡単な方法は何ですか? を複製してコメントごとに作成する必要はないtextareaと思います。display:none

テキストエリアあり

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

テキストエリアなし

<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の回答に応じて。

コメントの下にすでにテキストエリアがあるかどうかは、すでにテストされています。その場合は発送となります。

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