原生 JavaScript 实现回复评论功能

在前端开发中，实现回复评论功能是非常常见的需求。本文将介绍如何使用原生 JavaScript 实现这一功能。

HTML 结构

首先，我们需要准备好 HTML 结构。假设我们有一个评论列表，每个评论都可以被回复。每个评论及其回复都应该有一个唯一的 ID：

--- --------------
  --- ---------------
    -------------
    ------- --------------------------------
    --- ----------------
      --- ---------------
        -------------
        ------- --------------------------------
      -----
      --- ---------------
        --------------
        ------- --------------------------------
      -----
    -----
  -----
  --- ---------------
    --------------
    ------- --------------------------------
    --- ----------------
      --- ---------------
        -------------
        ------- --------------------------------
      -----
    -----
  -----
-----

注意，每个回复按钮都使用了 reply-button 类名，以方便之后使用 JavaScript 选择器来获取它们。

JavaScript 实现

有了 HTML 结构之后，我们就可以开始编写 JavaScript 代码了。首先，我们需要获取所有的回复按钮，并为它们添加点击事件处理程序：

----- ------------ - -------------------------------------------

-------------------------------- -- -
  ------------------------------------- -- -- -
    -- ----
  ---
---

接下来，我们需要在每个评论下创建一个回复表单，并将其插入到 DOM 中。我们可以使用 insertAdjacentHTML 方法来实现这一点：

----- ------------- - -
  ----- -------------------
    ------ ----------- ----------------------
    ------- -------------------------
  -------
--

----- -------------- - --------------------------
---------------------------------------------- ---------------

注意，我们使用了 closest 方法来获取当前回复按钮所在的评论元素。

然后，我们需要为刚刚创建的回复表单添加提交事件处理程序。在提交事件处理程序中，我们可以通过 event.target 获取到表单元素，并从中取出用户输入的值。接着，我们可以根据用户输入的值创建一条新的回复，并将其插入到评论下面：

----- ---------- - -----------------------------------------

---------------------------- -- -
  ------------------------------------ ----- -- -
    -----------------------

    ----- ---------- - ---------------------------------------

    ----- --------- - -
      ----
        --------------------
        ------- --------------------------------
      -----
    --

    ----- -------------- - --------------------------------------------------
    ---------------------------------------------- -----------
  ---
---

最后，我们需要在每个回复按钮下面添加一个“取消回复”按钮，并为其添加点击事件处理程序。当用户点击“取消回复”按钮时，我们可以移除当前回复表单：

----- ---------------- - -
  ------- -----------------------------------
--

------------------------------------------ ------------------

----- ------------ - -------------------------------

-------------------------------------- -- -- -
  -------------------
  ----------------------
---

至此，我们已经完成了回复评论功能的实现。

总结

本文介绍了如何使用原生 JavaScript 实现回复评论功能。通过准备好 HTML 结构，获取回复按钮并为其添加点击事件处理程序，创建回复表单并为其添加提交事件处理

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/1023

原生js实现回复评论功能

原生 JavaScript 实现回复评论功能

HTML 结构

JavaScript 实现

总结