我很难解决这个问题。代码如下:
const postBox = document.querySelector('#posts')
const getUser = function(id, val) {
$.ajax({
type: 'GET',
url: `/api/user/${id}`,
success: function(response){
val.innerHTML = `Posted by: ${response.username}`
},
error: function(error){
console.log(error)
}
})
}
const getPosts = () => {
$.ajax({
type: 'GET',
url: '/api/posts/',
success: function(response){
console.log(response)
response.forEach(el => {
postBox.innerHTML += `
<div class="card mb-2">
<div class="card-body">
<h5 class="card-title">${el.title}</h5>
<p class="card-text">${el.body}</p>
<p class="card-text">${el.date}</p>
</div>
<div class="card-footer">
<p class="card-text" id='author${el.id}'></p>
</div>
</div>
`
const authorBox = document.querySelector(`#author${el.id}`)
console.log(authorBox)
getUser(el.author, authorBox)
})
},
error: function(error){
console.log('error')
},
})
}
getPosts()
只有最后一个项目有“作者发布”我似乎不明白为什么只有最后一个项目有它。即使当我检查它时,它也有“作者发布”的内部html和内部文本,但它没有显示。
以下是输出:
测试1
测试1
2021-07-12
测试2
测试2
2021-07-12
测试3
测试3
2021-07-12
测试4
测试4
2021-07-12
发帖人:凯里奥斯
如何确保所有authorbox的内部html都已更改?
1条答案
按热度按时间9wbgstp71#
请尝试使用
$(
#author${el.id}).val()
而不是document.querySelector(
#author${el.id})