0

ネストされた (reddit のような) コメントをアプリに追加しています。これまでcommentのところ、CSS でこれを行う divを使用しています。

.comment {
  margin-left: 40px;
}

これは、コメントを表示するのにうまく機能します。私の質問は、各コメントに返信フォームを追加する最もクリーンな方法は何ですか (ユーザーが何らかの返信ボタンをクリックしたときにのみ表示されます)。

これは通常、コメント用のすべての入力ボックスをすぐに追加し、最初は非表示にして、ユーザーが返信ボタンをクリックした場合にのみ表示することによって行われますか? <form>または、ユーザーがそのコメントの返信をクリックしたときにのみ、関連する HTML コードを特定の div に追加する必要がありますか?

これを行う最もクリーンな方法は何ですか?

4

2 に答える 2

3

HTMLのどこかにフォームフィールドを1つ隠し、ユーザーがcommectをクリックするたびにフォーム要素のクローンを作成し、コメントdivに追加することでこれを行うことができます

以下のjsFiddleの例をチェックしてください。コードスニペットです

<div class="comment">
    comment1
</div>
<div class="comment">
    comment2
</div>
<div style="display:none">
    <form id="commentForm">
        <textarea name="comment"></textarea>
    </form>
</div>

var Comment = {
    init: function() {
        $(".comment").bind('click', $.proxy(this.handleClick, this));
    },
    handleClick: function(evt) {
         var form = $('#commentForm').clone();
         var target = $(evt.target);
         var isFormAvailable = $("#commentForm", target).length > 0;
         if(!isFormAvailable) {
             $(evt.target).append(form);
         }
    }   
};

$(function() {
    Comment.init();
});
于 2013-03-16T06:58:51.520 に答える
1

ドキュメントのどこかにフォームのテンプレートを保持し、非表示のままにします。コメントの横にある返信をクリックすると、次のようになります。

  1. テンプレートのクローンを作成します (クローン機能を jquery できます)
  2. テンプレートの非表示フィールドに、返信がクリックされたコメントの ID を設定します
  3. 返信が必要なコメントの横に追加します

私はこれで行きます。

各コメントの入力ボックスをすぐに保持するのは意味がありません。ページのサイズが不必要に大きくなっています。

于 2013-03-16T07:08:09.250 に答える