评论未正确显示在帖子下(使用 json占位符)

当我点击评论图标时，评论只显示在第一张卡片上。同时评论的外观只在第一张卡片上发生变化。其他一切似乎都很好。我希望每张卡片都能单独显示和删除自己的评论。你可以看到我的代码片段问题。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/a89a4ef5c6.js" crossorigin="anonymous"></script>
<title>lab</title>
</head>
<body>
<div class="container">
<div class="row">
<button type="button" id="btn" class="mt-3 mx-auto btn btn-primary">Get Posts</button>
</div>
<div style="padding-top: 100px" class="row" id="cardDiv">
</div>
</div>
<script>
let ton = 0;
let div = document.getElementById('cardDiv');
const btn = document.getElementById('btn').addEventListener("click", getPosts);
function getPosts(){
fetch("https://jsonplaceholder.typicode.com/posts")
.then((response)=>{
return response.json();
})
.then((resp)=>{
console.log(resp)
resp.forEach(
elem=>{
div.innerHTML += `
<div class="card" style="width: 18rem;">
<div class="card-body">
<div>${elem.id}</div>
<h5 class="card-title">${elem.title}</h5>
<p class="card-text">${elem.body}</p>
<i id="myClick" onclick="showComments(${elem.id})" class="far fa-comment"></i>
<div class="zxc" id="hello"></div>
</div>
</div>`
}
)
})
}
function showComments(q){
let commentPlace = document.getElementById('hello');
let inp = document.getElementById('myClick');
if (inp.classList.contains("far")) {
fetch("https://jsonplaceholder.typicode.com/comments")
.then((resp)=>{
return resp.json();
})
.then((post)=>{
for (let index=0; index < post.length; index++){
if (post[ton].postId === q){
commentPlace.innerHTML += `<p>${post[ton].body}</p>`
}
ton = ton+1;
}
ton = 0;
}
)
inp.classList.remove("far");
inp.classList.add("fas");
}else {
inp.classList.remove("fas");
inp.classList.add("far");
commentPlace.innerHTML = "";
}
}
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>

您的评论没有正确显示的原因是您通过forloop创建卡片，该forloop为每张卡片分配相同的idhello和myClick。

我已经编辑了你的代码，它现在可以工作了-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/a89a4ef5c6.js" crossorigin="anonymous"></script>
<title>lab</title>
</head>
<body>
<div class="container">
<div class="row">
<button type="button" id="btn" class="mt-3 mx-auto btn btn-primary">Get Posts</button>
</div>
<div style="padding-top: 100px" class="row" id="cardDiv">
</div>
</div>
<script>
let ton = 0;
let div = document.getElementById('cardDiv');
const btn = document.getElementById('btn').addEventListener("click", getPosts);
function getPosts(){
fetch("https://jsonplaceholder.typicode.com/posts")
.then((response)=>{
return response.json();
})
.then((resp)=>{
console.log(resp)
resp.forEach(
elem=>{
div.innerHTML += `
<div class="card" style="width: 18rem;">
<div class="card-body">
<div>${elem.id}</div>
<h5 class="card-title">${elem.title}</h5>
<p class="card-text">${elem.body}</p>
<i id="myClick-${elem.id}" onclick="showComments(${elem.id})" class="far fa-comment"></i>
<div class="zxc" id="hello-${elem.id}"></div>
</div>
</div>`
}
)
})
}
function showComments(q){
let commentPlace = document.getElementById(`hello-${q}`);
let inp = document.getElementById(`myClick-${q}`);
if (inp.classList.contains("far")) {
fetch("https://jsonplaceholder.typicode.com/comments")
.then((resp)=>{
return resp.json();
})
.then((post)=>{
for (let index=0; index < post.length; index++){
if (post[ton].postId === q){
commentPlace.innerHTML += `<p>${post[ton].body}</p>`
}
ton = ton+1;
}
ton = 0;
}
)
inp.classList.remove("far");
inp.classList.add("fas");
}else {
inp.classList.remove("fas");
inp.classList.add("far");
commentPlace.innerHTML = "";
}
}
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>

相关内容

最新更新

热门标签：