在前端开发中，实现回复评论功能是非常常见的需求。本文将介绍如何使用原生 JavaScript 实现这一功能。
HTML 结构
首先，我们需要准备好 HTML 结构。假设我们有一个评论列表，每个评论都可以被回复。每个评论及其回复都应该有一个唯一的 ID：
-- -------------------- ---- -------
--- --------------
--- ---------------
-------------
------- --------------------------------
--- ----------------
--- ---------------
-------------
------- --------------------------------
-----
--- ---------------
--------------
------- --------------------------------
-----
-----
-----
--- ---------------
--------------
------- --------------------------------
--- ----------------
--- ---------------
-------------
------- --------------------------------
-----
-----
-----
-----注意，每个回复按钮都使用了 reply-button 类名，以方便之后使用 JavaScript 选择器来获取它们。
JavaScript 实现
有了 HTML 结构之后，我们就可以开始编写 JavaScript 代码了。首先，我们需要获取所有的回复按钮，并为它们添加点击事件处理程序：
const replyButtons = document.querySelectorAll('.reply-button');
replyButtons.forEach(replyButton => {
replyButton.addEventListener('click', () => {
// 处理逻辑
});
});接下来，我们需要在每个评论下创建一个回复表单，并将其插入到 DOM 中。我们可以使用 insertAdjacentHTML 方法来实现这一点：
-- -------------------- ---- -------
----- ------------- - -
----- -------------------
------ ----------- ----------------------
------- -------------------------
-------
--
----- -------------- - --------------------------
---------------------------------------------- ---------------注意，我们使用了 closest 方法来获取当前回复按钮所在的评论元素。
然后，我们需要为刚刚创建的回复表单添加提交事件处理程序。在提交事件处理程序中，我们可以通过 event.target 获取到表单元素，并从中取出用户输入的值。接着，我们可以根据用户输入的值创建一条新的回复，并将其插入到评论下面：
-- -------------------- ---- -------
----- ---------- - -----------------------------------------
---------------------------- -- -
------------------------------------ ----- -- -
-----------------------
----- ---------- - ---------------------------------------
----- --------- - -
----
--------------------
------- --------------------------------
-----
--
----- -------------- - --------------------------------------------------
---------------------------------------------- -----------
---
---最后，我们需要在每个回复按钮下面添加一个“取消回复”按钮，并为其添加点击事件处理程序。当用户点击“取消回复”按钮时，我们可以移除当前回复表单：
-- -------------------- ---- ------- ----- ---------------- - - ------- ----------------------------------- -- ------------------------------------------ ------------------ ----- ------------ - ------------------------------- -------------------------------------- -- -- - ------------------- ---------------------- ---
至此，我们已经完成了回复评论功能的实现。
总结
本文介绍了如何使用原生 JavaScript 实现回复评论功能。通过准备好 HTML 结构，获取回复按钮并为其添加点击事件处理程序，创建回复表单并为其添加提交事件处理
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/1023