如何停止重复上一篇文章
如何停止重复上一篇文章
提问于 2022-03-21 12:36:53
在displayLikedPosts中有一个名为getLikedPosts的函数。这个getLikedPosts函数过滤posts并将posts插入到数组中。现在，在运行post(ex:post-1)内部的forEach循环之后--第一次添加一个新的和单个的，但是第二次它会显示前一个帖子两次和新的帖子(ex: post-1，post-1，newpost)。但我的目的是只显示前一个帖子和新帖子(例如：post-1、newpost、newpost2、newpost4)。
code
const displayLikedPosts = () => {
const likedPosts = getLikedPosts();
likedPosts.forEach((post) => {
const div = createPost(post);
document.getElementById("liked").appendChild(div);
});
};回答 2
Stack Overflow用户
发布于 2022-03-21 12:43:35
在追加新元素之前清除#liked中的thr内容
伪码
const displayLikedPosts = () => {
const likedPosts = getLikedPosts();
document.getElementById("liked")innerHTML = "";
likedPosts.forEach((post) => {
const div = createPost(post);
document.getElementById("liked").appendChild(div);
});
};Stack Overflow用户
发布于 2022-03-21 12:50:43
必须首先删除父DOM节点的子节点，然后再次添加元素。删除孩子的方法有很多，这在this thread中有讨论。您可能会发现，有些选项比其他选项更好(和/或更现代)。
下面是用例的一个很小的示例，它使用setInterval()来证明列表不包含重复项。
/**
* Display posts
* @param {string[]} posts posts to display
*/
function displayPosts(posts) {
const parent = document.getElementById("liked");
// delete children
deleteChildren(parent);
// add items to the list
posts.forEach((post) => {
const listItem = document.createElement("li");
listItem.textContent = post;
parent.appendChild(listItem);
});
console.log("rendered")
}
/**
* Deletes all children of a DOM node.
* @param {HTMLElement} parent parent element
*/
function deleteChildren(parent) {
while (parent.firstChild) {
parent.firstChild.remove();
}
}
window.addEventListener("DOMContentLoaded", (event) => {
// posts to display
const posts = ["post 1", "post 2", "post 3", "post 4"];
displayPosts(posts)
// call method every 3 seconds to demonstrate it works
setInterval(() => displayPosts(posts), 3 * 1000);
});<ul id="liked">
</ul>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71557734
复制相关文章
相似问题
腾讯云开发者
