Question

嗨，大家好，我正在制作这个项目，该项目从总裁帐户中检索一条推文，并将其显示在卡中，如picture中所示。我的问题是我只知道如何只为一条推文显示一张卡片，但如何为每条推文显示多张卡片？

在javascript（第一个块）代码中，我提取了这些推文并将其插入DOM或本例中的卡。这是在Promise内部完成的。

在 <'！-> Card代码块<-> 下的HTML（第二块）中，有我创建卡的代码块。

如果您想知道我打算可视化某些数据，那就是为什么我在其中具有d3代码的原因。如果一切发生变化，所有这些都将通过服务器运行

tweetData=d3.json("/tweets").then(function(data){
    return data;});

Promise.all([tweetData]).then(function(values){
        data=values[0];
        console.log(data.length)

        document.querySelector(".btn-jan").addEventListener('click',function(){
            for (var x=3;x<=3;x++){
        document.querySelector("#full_text").textContent=data[x].full_text;
        document.querySelector("#created_at").textContent=data[x].created_at;}
        
        });
        // document.getElementById('#lk').setAttribute('href','https://twitter.com/statuses/?id=' + data.id_str);


    
    });

<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <title>Twitter app</title>
    <!-- Bootstrap -->
    <!-- Custom styling -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" type=text/css href="{{ url_for('static', filename='css/style.css') }}">


</head>
<body>
<!-->img  class="img-fluid" alt="Responsive image" src="{{ url_for('static', filename='head.jpg') }}"-->

<div class="text-center primary">
<h2>Trump</h2>
</div>

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Month 2018
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
  <button class="btn-jan text-center"><li><a>January</a></li></button>
   
  </ul>
 
</div>

<!-->Card code block<-->

<div class="card" style="width: 30rem;">
  <div class="card-body">
    <h6 class="card-subtitle mb-2 text-muted" id="created_at">Card subtitle</h6>
    <p class="card-text" id="full_text"></p>
    <a href="https://twitter.com/statuses/?id" class="card-link" id="lk">Card link</a>
  </div>
</div>


<!-- External JS libraries -->

<script src="http://d3js.org/d3.v5.min.js"></script>
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="{{ url_for('static', filename='app.js') }}"></script>
<script src="{{ url_for('static', filename='style.css') }}"></script>
<!-- Custom JS -->
</body>

如何为每个文本打印多张卡片

0 个答案: