javascript - 如何使用 API 在不同的卡片上打印不同的标题？

Question

我试图使用 jquery 和 javascript 将 jsonplaceholder 获得的不同标题打印到不同的卡片上

这是 HTML 部分:

<div class="album py-5">
                <div class="container">
                  <div class="row">
                    <div class="col-md-4">
                      <div class="card mb-4 box-shadow">
                        <div class="card-body">
                          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                          <div class="d-flex justify-content-between align-items-center">
                            <div class="btn-group">
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div class="col-md-4">
                      <div class="card mb-4 box-shadow">
                        <div class="card-body">
                          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                          <div class="d-flex justify-content-between align-items-center">
                            <div class="btn-group">
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div class="col-md-4">
                      <div class="card mb-4 box-shadow">     
                        <div class="card-body">
                          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                          <div class="d-flex justify-content-between align-items-center">
                            <div class="btn-group">
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

这是 JS:

//starts at 14:43, sat 21/9/2019

//jsonph

const url = 'https://jsonplaceholder.typicode.com/todos?_limit=3';

async function getDataFromCinemasAPI() {
    const response = await fetch(url);
    const data = await response.json();

    for (let i = 0; i < data.length; i--) {
        $('.card-text').html((data[i]["title"]));
    }    
}

getDataFromCinemasAPI();

但是我得到的结果是三张不同卡片的相同标题， 抱歉，html 很长:D

Answer 1

问题是您的代码在每次迭代时同时更新所有卡片，因此您最终看到的是所有卡片上的列表标题。您可以简单地执行以下操作:

$('.card-text').eq(i).html((data[i]["title"]));

尽管这不是最好的方法，因为您总是查询 DOM。一种优化是将卡片集合存储在变量中:

let cards = $('.card-text');

for (let i = 0; i < data.length; i++) {
    cards.eq(i).html((data[i]["title"]));
}