Question

我正在为我的应用添加嵌套（类似reddit）的评论;到目前为止，我只使用comment div，在我的CSS中我这样做：

.comment {
  margin-left: 40px;
}

这适用于显示评论。我的问题是，现在为每条评论添加回复表单的最简洁方法是什么（只有在用户点击某种回复按钮时才会显示）？

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

最干净的方法是什么？

Answer 1

你可以通过在html中的某个地方隐藏一个表单字段，然后当用户点击表单元素并将其附加到注释div时将其附加到评论div

结帐以下jsFiddle example是代码段

<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

在文档中的某处保留表单模板并将其隐藏起来。点击任何评论旁边的回复，请执行以下操作。

克隆模板（可以jquery克隆功能）
将模板中的隐藏字段设置为已单击回复的注释的ID
将其附加到需要回复的评论旁边

我会接受这个。

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

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

2 个答案: