如何将 onclick 添加到 div 以显示或隐藏数据

Question

见过类似的问题，但在我的情况下，我正在处理来自 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
        
    }```

Answer 1

首先，您需要在包装器div中添加所有动态块，例如，我们将其称为articles

之后，您需要在此包装器中添加eventListener以侦听click事件，然后检查单击的元素是否是标题切换hide class 是在css 8CBA22E28EB17B5F5C6AE2A266AZ 中预定义的，如下面的示例

 const wrapperEl = document.querySelector('#articles'); wrapperEl.addEventListener('click', function(e){ if(e.target.id == 'header'){ e.target.nextElementSibling.classList.toggle('hide') } });

 .hide { display: none }

 <div id="articles"> <div> <p id="header">title 1<span>......</span></p> <p id="body" class="hide">article content here</p> <p>Sent on: 02/17/2020</p> </div> <hr /> <div> <p id="header">title 2<span>......</span></p> <p id="body" class="hide">article content here</p> <p>Sent on: 02/17/2020</p> </div> <hr /> <div> <p id="header">title 3<span>......</span></p> <p id="body" class="hide">article content here</p> <p>Sent on: 02/17/2020</p> </div> <hr /> <div> <p id="header">title 4<span>......</span></p> <p id="body" class="hide">article content here</p> <p>Sent on: 02/17/2020</p> </div> </div>

注意：在此示例中，我只是添加了一些硬编码块进行测试，但在您的情况下，它将以动态方式从API变为，但在展位情况下，它应该位于包装器元素内

Answer 2

添加缺少的代码来隐藏body div ，并使用class="body"而不是id用于段落和 div 元素，因为这些将重复。

 const data = [ {subject: "test123", message_details: "msg123", created_on: "12-05-2021"}, {subject: "test456", message_details: "msg456", created_on: "02-05-2020"}, {subject: "test789", message_details: "msg789", created_on: "11-07-2011"}, ]; let msg = ""; data.forEach(message => { msg += ` <div class="read"> <p id="header">${message.subject}<span>......</span></span></p> <p class="body">${message.message_details}</p> <p>Sent on: ${message.created_on}</p> </div> <hr>` }); document.getElementById("inbox").innerHTML = msg; const bodyElements = document.querySelectorAll(".read"); bodyElements.forEach(function(bodyEle) { bodyEle.addEventListener("click", (e) => { bodyEle.children[1].classList.toggle("hide"); }); });

 .hide { display: none; }

 <html> <head></head> <body> <h1>My title</h1> <div id="inbox"> </div> </body> </html>

Answer 3

首先，您不应该使用 id，因为您将多次使用相同的 id。 因此，您应该将它们设为 class。

假设您使用 axios，或获取 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')
}

如何将 onclick 添加到 div 以显示或隐藏数据

问题描述

3 个解决方案

解决方案1
1 2021-05-07 14:34:31

解决方案2
1 2021-05-07 14:35:53

解决方案3
0 2021-05-07 14:37:38

如何将 onclick 添加到 div 以显示或隐藏数据

问题描述

3 个解决方案

解决方案1 1 2021-05-07 14:34:31

解决方案2 1 2021-05-07 14:35:53

解决方案3 0 2021-05-07 14:37:38

解决方案1
1 2021-05-07 14:34:31

解决方案2
1 2021-05-07 14:35:53

解决方案3
0 2021-05-07 14:37:38