Javascript 如何向div添加onclick以显示或隐藏数据

我见过类似的问题，但在我的例子中，我处理的是来自API的动态数据。希望当用户单击仅包含主题的消息时，显示正文，然后用户可以再次单击 尸体需要隐藏。它工作得很好，但希望添加该功能

    if(data.status == 200){

        data.data.forEach(message => {            
                msg +=  `
                <div id="read">
                    <p id="header">${message.subject}<span>......</span></span></p>
                    <p id="body">${message.message_details}</p>
                    <p>Sent on: ${message.created_on}</p>
                </div>
                <hr>`
                
        });
        document.getElementById("inbox").innerHTML = msg
        
    }```

if（data.status==200）{
data.data.forEach（消息=>{
味精+=`
${message.subject}
${message.message\u详细信息}
发送日期：${message.created_on}

`
});
document.getElementById（“收件箱”）.innerHTML=msg
}```

首先，您需要将所有动态块添加到包装器

div

中，例如，我们称之为

文章

之后，您需要在此包装器中添加
eventListener
以侦听
单击
事件，然后检查单击的元素是否是
隐藏
类的标题切换，该类在
css
中预定义，如下例所示


const wrapperEl=document.querySelector（“#articles”）；
wrapperEl.addEventListener（'click'，函数（e）{
如果（e.target.id=='header'）{
e、 target.nextElementSibling.classList.toggle（'hide'）
}
});
.hide{
显示：无
}

标题1

此处的文章内容
发送日期：2020年2月17日


标题2

此处的文章内容
发送日期：2020年2月17日


标题3

此处的文章内容
发送日期：2020年2月17日


标题4

此处的文章内容
发送日期：2020年2月17日

首先，您需要将所有动态块添加到包装器
div
中，例如，我们称之为
文章

之后，您需要在此包装器中添加
eventListener
以侦听
单击
事件，然后检查单击的元素是否是
隐藏
类的标题切换，该类在
css
中预定义，如下例所示


const wrapperEl=document.querySelector（“#articles”）；
wrapperEl.addEventListener（'click'，函数（e）{
如果（e.target.id=='header'）{
e、 target.nextElementSibling.classList.toggle（'hide'）
}
});
.hide{
显示：无
}

标题1

此处的文章内容
发送日期：2020年2月17日


标题2

此处的文章内容
发送日期：2020年2月17日


标题3

此处的文章内容
发送日期：2020年2月17日


标题4

此处的文章内容
发送日期：2020年2月17日

添加缺少的代码以隐藏
正文div
，并对段落和div元素使用
class=“body”
而不是
id
，因为它们将重复


const数据=[
{主题：“test123”，消息详细信息：“msg123”，创建于：“12-05-2021”}，
{主题：“test456”，消息详细信息：“msg456”，创建于：“02-05-2020”}，
{主题：“test789”，消息详细信息：“msg789”，创建于：“11-07-2011”}，
];
让msg=“”；
data.forEach（消息=>{
味精+=`
${message.subject}
${message.message\u详细信息}
发送日期：${message.created_on}

`
});
document.getElementById（“收件箱”）.innerHTML=msg；
const bodyElements=document.queryselectoral（“.read”）；
bodyElements.forEach（函数（bodyEle）{
bodyEle.addEventListener（“单击”，（e）=>{
bodyEle.children[1].classList.toggle（“隐藏”）；
});
});
.hide{
显示：无；
}

我的头衔
添加缺少的代码以隐藏
正文div
，并对段落和div元素使用
class=“body”
而不是
id
，因为它们将重复


const数据=[
{主题：“test123”，消息详细信息：“msg123”，创建于：“12-05-2021”}，
{主题：“test456”，消息详细信息：“msg456”，创建于：“02-05-2020”}，
{主题：“test789”，消息详细信息：“msg789”，创建于：“11-07-2011”}，
];
让msg=“”；
data.forEach（消息=>{
味精+=`
${message.subject}
${message.message\u详细信息}
发送日期：${message.created_on}

`
});
document.getElementById（“收件箱”）.innerHTML=msg；
const bodyElements=document.queryselectoral（“.read”）；
bodyElements.forEach（函数（bodyEle）{
bodyEle.addEventListener（“单击”，（e）=>{
bodyEle.children[1].classList.toggle（“隐藏”）；
});
});
.hide{
显示：无；
}

我的头衔
首先，您不应该使用id，因为您将多次使用相同的id。所以，你应该让他们上课

假设您使用axios或fetch API，实际上并不重要：

axis.get('api-url').then(response => {
  // create your HTML outputs here
}).then(() => {
   document.querySelectorAll('.header').forEach(x => x.addEventListener('click', toggleBody));
})

const toggleBody = (event) => {
  event.closest('.read').querySelector('.body').classList.toggle('is-open')
}

首先，您不应该使用id，因为您将多次使用相同的id。所以，你应该让他们上课

假设您使用axios或fetch API，实际上并不重要：

axis.get('api-url').then(response => {
  // create your HTML outputs here
}).then(() => {
   document.querySelectorAll('.header').forEach(x => x.addEventListener('click', toggleBody));
})

const toggleBody = (event) => {
  event.closest('.read').querySelector('.body').classList.toggle('is-open')
}

收件箱id为的div在哪里？它在主HTML中。输出很好，只是想添加该功能。在answ中添加了代码