javascript - Flickr API 和 JavaScript 函数？

对于一项作业，我们需要使用 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

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

最佳答案

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

HTML5:

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

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

<header>标签进入 <body>标签。
您可以使用 class属性为每个 div 关联一个 Action 而不是使用它的 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>

祝你有美好的一天。

关于javascript - Flickr API 和 JavaScript 函数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49862282/

javascript - Flickr API 和 JavaScript 函数？

上一篇：javascript - 我可以测试函数中的变量吗？

下一篇：javascript - d3js v4 重叠条形图