时间戳

首页 > 解决方案 > 使这些 div 可点击 jsonparse

javascript - 使这些 div 可点击 jsonparse

问题描述

我想让这些帖子中的每一个都可以点击，以便出现一个新页面，我可以显示点击帖子的更详细信息。我正在使用 jsonplaceholder 来获取我的信息

html:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <title>Mini reddit</title>
</head>
<body>

    <div class="topnav">
        <a class="active" href="#home">Home</a>
      </div>
    
    <div class="container">
        
        <div class="row" id="postsDiv">
        </div>

    </div>

      <script src="js_mini_reddit.js"></script>
</body>
</html>

javascript:

var div = document.getElementById("postsDiv");
var count = 0;

function getData() {
    
    let xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/', true);
    xhr.onload = function(){
        if (this.status == 200)
        {
            let data = JSON.parse(this.responseText);
            for (let index = 0; index < 10; index++)
            {
                div.innerHTML +=`
                <div class="col-4 text-white card bg-dark mx-auto border border-white" >
                <div class="card-body">
                <p class="card-title">ID: ${data[count].id} </p>
                <p class="card-title">TITLE: ${data[count].title} </p>
                <p>BODY: ${data[count].body} </p>
                </div>
                </div>`
                count += 1;
            }
        }
    }
    xhr.send();
}

getData();

标签： javascripthtmljquerycssajax

解决方案

推荐阅读