0

我正在向我的应用程序添加嵌套（类似 reddit）的评论；到目前为止，我只是使用commentdiv，在我的 CSS 中我这样做：

.comment {
  margin-left: 40px;
}

这适用于显示评论。我的问题是现在向每个评论添加回复表单的最干净的方法是什么（并且仅在用户单击某种回复按钮时显示它）？

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

最干净的方法是什么？

4

2 回答 2

3

您可以通过在 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();
});
于 2013-03-16T06:58:51.520 回答
1

将表单模板保存在文档中的某个位置并将其隐藏。单击任何评论旁边的回复后，请执行以下操作。

  1. 克隆模板（可以jquery克隆功能）
  2. 将模板中的隐藏字段设置为点击回复的评论的 id
  3. 将其附加到需要回复的评论旁边

我会和这个一起去的。

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

于 2013-03-16T07:08:09.250 回答