仅在 Vanilla JavaScript 中附加在第一篇文章上的评论
我正在创建一个状态发布和评论系统。它是在 Vanilla JavaScript 中实现的。任何人都可以添加帖子并可以对帖子发表评论。一切正常，但评论部分仅针对第一篇文章。删除评论和帖子工作正常。我不知道问题出在哪里，如果有人能帮助我的话。这是 HTML 代码
<div class="container-post" id="container-post">
<div class="create-post">
<form>
<div class="form-group">
<div class="username">
<p class="name" style="top:15px;">User Name</p>
</div>
<p class="qoutes">
<textarea style=" font-size: 15pt;" class="form-control" id="enter-post" rows="7" id="mypara" placeholder="Share Your Thoughts..."></textarea>
</p>
<div class="postbar">
<button type="button" class="btn btn-primary post-me" id="post-button"> <span id="postText">Post</span></button>
</div>
</div>
</form>
</div>
<hr class="line-bar">
<div class="allpost">
<div class="mainpost" id="post-div"></div>
</div>
精慕HU浏览 148回答 2
2回答
-
天涯尽头无女友
当您使用如下代码时：createComment.innerHTML = commentHTMLValue;您正在完全替换元素的内容。尝试使用：createComment.innerHTML += commentHTMLValue;它将新内容附加到现有内容的末尾。 -
红糖糍粑
我不能在这里做一个片段，因为不允许使用 localStorage。将此块复制到一个空白文件中并将其另存为 html 文件，然后在浏览器中打开它。这就是我认为您描述需求的方式，也是基于我评论中的数据格式。它不漂亮，需要大量修饰，但它可以运行。<!DOCTYPE html><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"><html><head><title>Task listing</title><script type="text/javascript">let taskList = [];function checkTasks() { let tasksList = getTasksList(); if (tasksList.length == 0) { let newTask = prompt("Please enter a task description"); if (newTask) { let thisIndex = getNewIndex(); let a = {"id": thisIndex, "task": newTask, "comments": []} taskList.push(a); saveTasksList(taskList); } } displayTasks();}function displayTasks() { let container = document.getElementById("tasks"); container.innerHTML = ""; let taskList = getTasksList(); taskList.forEach(function(task){ let d = document.createElement("div"); d.id = "task_" + task.id; d.className = "commentdiv"; d.innerHTML = "<h3>" + task.task + "</h3>"; let l = document.createElement("ul"); l.id = "comments_" + task.id; let comments = task.comments; if (comments.length > 0) { let commentindex = 0; comments.forEach(function(comment) { let c = document.createElement("li"); c.innerHTML = comment; let cb = document.createElement("button"); cb.id = "deletecomment_" + task.id + "_" + commentindex; cb.innerHTML = "Delete comment"; cb.onclick = function() {deleteComment(task.id, commentindex);}; c.appendChild(cb); l.appendChild(c); }) } let b = document.createElement("button"); b.id = "addcomment_" + task.id; b.onclick = function() {addComment(task.id);}; b.innerHTML = "Add comment"; d.appendChild(b); d.appendChild(l); container.appendChild(d); })}function addComment(taskid) { let newcomment = prompt("Enter comment"); if (newcomment) { let tasklist = getTasksList(); let filtered = tasklist.filter(task => task.id == taskid); if (filtered[0]) { let thisTask = filtered[0]; thisTask.comments.push(newcomment); let thisIndex = taskList.findIndex((task) => task.id == taskid); taskList[thisIndex] = thisTask; } saveTasksList(taskList); displayTasks(); }}function addNewTask() { let newTask = prompt("Enter task description"); let taskList = getTasksList(); let lastindex = localStorage.getItem("tasksindex"); let index = getNewIndex(); let a = {"id": index, "task": newTask, "comments": []} taskList.push(a); saveTasksList(taskList); displayTasks();}function deleteComment(taskid, commentindex) { let tasklist = getTasksList(); let filtered = tasklist.filter(task => task.id == taskid); // as long as there is at least one task with the taskid value, find and delete the comment // based on the index position of the comment in the comments array if (filtered[0]) { let thisTask = filtered[0]; thisTask.comments.splice(commentindex, 1); let thisIndex = taskList.findIndex((task) => task.id == taskid); taskList[thisIndex] = thisTask; } saveTasksList(taskList); displayTasks();}function getTasksList() { let tasks = localStorage.getItem("tasks"); taskList = JSON.parse(tasks); if (!taskList) { taskList = []; } return taskList;}function saveTasksList(taskList) { localStorage.setItem("tasks", JSON.stringify(taskList));}function getNewIndex() { let lastindex = localStorage.getItem("tasksindex"); let idx = 0; if (!lastindex) { idx = 1; } else { idx = Number(lastindex) + 1; } localStorage.setItem("tasksindex", idx); return idx;}function removeAll() { localStorage.removeItem("tasks"); localStorage.removeItem("tasksindex"); displayTasks();}window.onload = checkTasks;</script><style type="text/css">.commentdiv { border:1px solid black; width:1000px; padding:5px; border-radius:5px;}button { margin-left:10px;}h3 { width:100%; border-bottom: 1px dotted black;}ul { list-style-type:decimal;}</style></head><body><h2>My task list <button id="addNewTaskButton" onclick="addNewTask();">Add new task</button></h2><hr><div id="tasks"></div><button id="removeAll" onclick="removeAll();">Remove all tasks</button></body></html>
随时随地看视频慕课网APP
相关分类
JavaScript