Flickr API 和 JavaScript 函数？

Question

对于一项作业，我们需要使用 Flickr API 来在单击某个类别时显示一串照片。我在 flexbox 容器的左侧有我的类别，但我不确定如何在单击以显示带有标签网球的所有内容的 Flickr API 时获取文本 'tennis'。

还有 Flickr API，照片下面没有标题，这也是我需要的。无论我编辑多少，图像也会显示在一列中。谁能帮我解决这个问题？

我是编码的初学者，所以我很想了解这些事情是如何完成的。

代码如下：

$("#tennis").click(function() {

  //api search for tennis
  let API_KEY = MY API KEY ";
  let tennisStr = "https://api.flickr.com/services/rest/?method=flickr.photos.search&tags=tennis&per_page=15&format=json&nojsoncallback=1&" + API_KEY;
  let photos = [];
  let nrequest;
  let nreceived;

  $(document).ready(function() {
    console.log(tennisStr);
    $.get(tennisStr, function(data) {
      fetchPhoto(data);
    });
  });

  function fetchPhoto(data) {
    nrequest = data.photos.photo.length;
    nreceived = 0;
    for (let i = 0; i < data.photos.photo.length; i++) {
      let photoObj = {
        id: data.photos.photo[i].id,
        title: data.photos.photo[0].title
      }
      photos.push(photoObj);
      getSizes(photoObj);
    }

    function getSizes(photoObj) {
      let getSizesStr = "https://api.flickr.com/services/rest/?method=flickr.photos.getSizes&format=json&nojsoncallback=1&" + API_KEY + "&photo_id=" + photoObj.id;
      $.get(getSizesStr, function(data) {
        nreceived++;
        photoObj.file = data.sizes.size[5].source;
        photoObj.full = data.sizes.size[data.sizes.size.length - 1].source;
        if (nreceived == nrequest) {
          display(photos);
        }
      });
    }

    function display(photos) {
      let htmlStr = "";
      for (let i = 0; i < photos.length; i++) {
        htmlStr += `<figure><a href=${photos[i].file}'><img src = "${photos[i].file}" height = "200" width = "200"></a><figcaption>photos</figcaption></figure>`;
      }
      $("#flickrphoto").html(htmlStr);
    }
  }
});

.flex-container {
  display: flex;
}

.flex-container>div {
  border: 1px solid black;
  flex-direction: column;
}

#navigation {
  flex-grow: 1;
  text-align: left;
}

#flickrphoto {
  display: flex;
  flex-grow: 2;
  text-align: center;
  flex-wrap: wrap;
  justify-content: center;
  flex-basis: auto;
}

#recenthistory {
  flex-grow: 1;
  text-align: left;
}

header {
  text-align: center;
  background-color: black;
  color: white;
  padding: 4rem;
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: black;
  color: white;
  text-align: center;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset=utf-8>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="./js/main.js"></script>
  <title>Sports Album</title>
  <header>
    <h1>Sports Album</h1>
  </header>
</head>

<body>
  <div class="flex-container">
    <div id="navigation">
      <h2>Categories</h2><br>
      <div id="nav">
        <div id="tennis">
          <p>Tennis</p>
          </br>
        </div>
        <div id="football">
          <p>Football</p>
          </br>
        </div>
        <div id="swimming">
          <p>Swimming</p>
          </br>
        </div>
      </div>
    </div>
    <div id="flickrphoto">
      <h2>Flickr</h2>
    </div>
    <div id="recenthistory">
      <h2>Recent history</h2>
    </div>
  </div>

  <div class="footer">
    <p>Jasmine</p>
  </div>
</body>

</html>

This is a quick image of what it looks like so far

感谢您查看我的作品并试图帮助我了解哪里出了问题！

Answer 1

我在您的代码中发现了一些问题：

HTML5:

您应该只使用一个版本的 jQuery。在这种情况下：

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<header> 标签位于 <body> 标签内。
您可以使用 class 属性为每个 div 关联一个动作，而不是使用它的 id。例如：

<div id="nav">
  <div id="tennis" class="request">
    <p>Tennis</p>
    <br />
  </div>
  <div id="football" class="request">
    <p>Football</p>
    <br />
  </div>
  <div id="swimming" class="request">
    <p>Swimming</p>
    <br />
  </div>
</div>

CSS:

无论我如何编辑，图像也会显示在一个列中。 只需删除：flex-direction: column;。

像这样：

.flex-container > div {
   border: 1px solid black;
}

JavaScript/jQuery:

将您的 jQuery 代码包裹在 $(function(){}); 中。像这样：

$(function()
{
   // Code goes here...
});

API_KEY 变量必须有双引号内的字符串值。例如：let API_KEY = "39417c145483a7fb3ee91c5fe5bc93fe";.
您可以使用 $(".request").on("click", function() { 向 Flickr API 发出具有单一功能的每个类别的请求。我建议使用 .on("click").
在您的 fetchPhoto 中，您有：data.photos.photo[0].title。改为 data.photos.photo[i].title.
然后，在您的显示函数中，您可以使用以下方法打印正确的标题：

<figcaption>${photos[i].title}</figcaption>

看这个例子：

像这样：

$(function() {
  $(".request").on("click", function() {
    let searchText = $(this).children().text();
    let API_KEY = "39417c145483a7fb3ee91c5fe5bc93fe";
    let tennisStr = "https://api.flickr.com/services/rest/?method=flickr.photos.search&tags=" + searchText + "&per_page=15&format=json&nojsoncallback=1&api_key=" + API_KEY;
    let photos = [];
    let nrequest;
    let nreceived;

    $.get(tennisStr, function(data) {
      fetchPhoto(data);
    });

    function fetchPhoto(data) {
      nrequest = data.photos.photo.length;
      nreceived = 0;
      for (let i = 0; i < data.photos.photo.length; i++) {
        let photoObj = {
          id: data.photos.photo[i].id,
          title: data.photos.photo[i].title
        }
        photos.push(photoObj);
        getSizes(photoObj);
      }

      function getSizes(photoObj) {
        let getSizesStr = "https://api.flickr.com/services/rest/?method=flickr.photos.getSizes&format=json&nojsoncallback=1&api_key=" + API_KEY + "&photo_id=" + photoObj.id;
        $.get(getSizesStr, function(data) {
          nreceived++;
          photoObj.file = data.sizes.size[5].source;
          photoObj.full = data.sizes.size[data.sizes.size.length - 1].source;
          if (nreceived == nrequest) {
            display(photos);
          }
        });
      }

      function display(photos) {
        let htmlStr = "";
        for (let i = 0; i < photos.length; i++) {
          htmlStr += `<figure><a href=${photos[i].file}'><img src = "${photos[i].file}" height = "200" width = "200"></a><figcaption>${photos[i].title}</figcaption></figure>`;
        }
        $("#flickrphoto").html(htmlStr);
      }
    }
  });
});

.flex-container {
  display: flex;
}

.flex-container>div {
  border: 1px solid black;
}

#navigation {
  flex-grow: 1;
  text-align: left;
}

#flickrphoto {
  display: flex;
  flex-grow: 2;
  text-align: center;
  flex-wrap: wrap;
  justify-content: center;
  flex-basis: auto;
}

#recenthistory {
  flex-grow: 1;
  text-align: left;
}

header {
  text-align: center;
  background-color: black;
  color: white;
  padding: 4rem;
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: black;
  color: white;
  text-align: center;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset=utf-8>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="./js/main.js"></script>
  <title>Sports Album</title>
</head>

<body>
  <header>
    <h1>Sports Album</h1>
  </header>
  <div class="flex-container">
    <div id="navigation">
      <h2>Categories</h2><br>
      <div id="nav">
        <div id="tennis" class="request">
          <p>Tennis</p>
          <br />
        </div>
        <div id="football" class="request">
          <p>Football</p>
          <br />
        </div>
        <div id="swimming" class="request">
          <p>Swimming</p>
          <br />
        </div>
      </div>
    </div>
    <div id="flickrphoto">
      <h2>Flickr</h2>
    </div>
    <div id="recenthistory">
      <h2>Recent history</h2>
    </div>
  </div>

  <div class="footer">
    <p>Jasmine</p>
  </div>
</body>

</html>

祝你有美好的一天。

Flickr API 和 JavaScript 函数？

Flickr API and JavaScript functions?

html

javascript

css

jquery

flickr