Question

我已经用PHP编写了注释系统。当前，编辑器位于页面顶部：

<form method="POST" id="comment_form" enctype="multipart/form-data">
   <input type="text" name="comment_name" id="comment_name" value="<?php echo $user ?>" placeholder="User" />
   <textarea name="comment_content" id="comment_content" placeholder="Comment" rows="5"></textarea>
   <input type="hidden" name="comment_id" id="comment_id" value="" />
   <input type="submit" name="submit" id="save" class="btn" value="Send" />
</form>

每个评论都像这样（简化）：

<div class="comment">
   <b><?php echo $row["user"] ?></b>
   <div>
      <?php echo $row["comment"] ?>
   </div>
   <button type="button" class="btn reply" id="'.$row["comment_id"].'">Reply</button>
</div>

单击“答复”按钮时，一个小的javascript函数会将焦点设置在编辑器上：

$(document).on('click', '.reply', function(){
   var comment_id = $(this).attr("id");
   $('#comment_id').val(comment_id);
   $('#comment_name').focus();
   });
});

我希望在单击其中一个按钮时，该编辑器在任何答复按钮下面打开。

我猜想在每个带有“ display：none”属性的注释后添加编辑器代码不是最佳解决方案。

您能帮助我实现这一目标吗？

Answer 1

如果我正确理解，您希望所有注释都使用一种表单，而不是在每个注释中复制HTML表单。

在这种情况下，您需要通过JavaScript在DOM中移动它。您没有对此进行任何尝试，但是可能看起来像这样：

$(document).on('click', '.reply', function() {
   $('#comment_form').insertAfter(this); //<-- move form
   var comment_id = $(this).attr("id");
   $('#comment_id').val(comment_id);
   $('#comment_name').focus();
});

还请注意，您的JS在语法上无效，因为您有双});。

评论系统：在“回复”按钮旁边打开一个复杂的表单（编辑器）

1 个答案: