将回复表单添加到嵌套注释的最干净的方法

Question

我正在为我的应用程序添加嵌套的(类似于reddit)评论;到目前为止，我只使用commentdiv，在我的CSS中我这样做:

.comment {
  margin-left: 40px;
}

这可以很好地显示注释。我的问题是，现在为每个评论添加回复表单的最干净的方法是什么(并且只在用户单击某种回复按钮时显示它)?

这通常是通过立即为评论添加所有输入框，一开始隐藏它们，然后只有在用户单击回复按钮时才显示它们来完成的吗?或者我是否应该只在用户点击回复该评论时将相关的<form> HTML代码附加到给定的div ?

最干净的方法是什么?

Answer 1

你可以通过在html中隐藏一个表单字段来做到这一点当用户点击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();
});

Answer 2

将表单模板保存在文档的某个位置并将其隐藏起来。点击任何评论旁边的回复按钮，按以下步骤操作。

1. 克隆模板(可以使用jquery克隆函数)
2. 在模板中设置一个隐藏字段为被点击回复的评论的id
3. 将其附加在需要回复的注释旁边

我要这个。

保留每个评论的输入框是没有意义的。这是不必要的增加页面的大小。