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"]));
}

Answer 2

您的逻辑中有两个问题。首先，在循环时您要递减i，如果您要向后遍历数组，这很好，但是您要尝试向前，因此请使用i++。

第二，您需要使用eq()来通过其索引获取特定的.card-text元素。您当前的逻辑将覆盖每次循环迭代中的所有元素。试试这个：

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').eq(i).html(data[i]["title"]);
  }
}

getDataFromCinemasAPI();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

更进一步，我建议您动态构建.card-text元素，而不是对其进行硬编码，否则，如果API返回数组中除3个对象之外的任何其他对象，您将遇到问题。

Answer 3

<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-text1">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-text2">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-text3">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>













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

您使用的是同一个Calss名称，所以只要您使用不同的班级名称即可解决问题

如何使用api在不同的卡片中打印不同的标题？

3 个答案: