Flickr API 和 JavaScript 函数？答案

【问题标题】：Flickr API and JavaScript functions?Flickr API 和 JavaScript 函数？
【发布时间】：2018-04-16 16:40:41
【问题描述】：

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

同样使用 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

感谢您查看我的工作并试图帮助我了解我哪里出错了！

【问题讨论】：

标签： javascript jquery html css flickr

【解决方案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>

祝你有美好的一天。

【讨论】：

您好！太感谢了。我打算制作类别按钮。如果我要这样做，我该如何调用按钮，所以如果有人点击网球，它只会出现在网球标签上。我也不确定如何放入多个api，我应该复制并粘贴文本吗？
它没有工作，现在我的页面无处不在，没有列。我很困惑。如何让 flickr 图片像你的那样显示？
我想通了，但我现在无法显示我的 flickr 图像...我该怎么办？或者为什么左边的文字没有在中间显示它们？ :(
没关系，我发现我必须突出显示文本。谢谢你丹尼！
@JasmineK 有了这个代码版本，就不需要多个API函数了。我建议您使用此代码。请记住，您现在拥有：$(".request").on("click", function() {。与可视化相关，您必须使用媒体查询。