2

我设置了一个查询 Instagram API 并显示图像的链接。我想要它，所以当我再次单击链接时，它会刷新并获取更新的图像（或多个链接）。但它总是在第一次点击后失败。

   <div class="keywords">
   <p id="olympics"><a href="#">#olympics</a></p>
   <p id="london"><a href="#">#london</a></p>
   </div>

这是我的 JS：

  $(".keywords").live('click',function()

  {        
      $.ajax({
      type: "GET",
      dataType: "jsonp",
      cache: false,
      url: "https://api.instagram.com/v1/tags/olympics/media/recent?client_id=XXXXXXXXX&access_token=XXXXXXXXXXXXX",
      success: function(data) {
          for (var i = 0; i < 10; i++) {
              $(".pics").append("<a target='_blank' href='" + data.data[i].link +
              "'><img src='" + data.data[i].images.low_resolution.url +"'></img></a>");
                                      }
                              }                

      })
  }
  );
4

4 回答 4

2

如果您想在新单击时刷新图片列表，您可能需要.pics在添加新图像之前清空 div。

$(".pics").empty();
for (var i = 0; i < 10; i++) {
    $(".pics").append("<a target='_blank' href='" + data.data[i].link +
"'><img src='" + data.data[i].images.low_resolution.url +"'></img></a>");
}

因为现在图片被附加到未替换的列表中。

编辑

抱歉$(".pics").empty();应该在 for 循环之前不在它里面。

于 2012-07-27T10:03:13.610 回答
1

在处理第一个结果时，您可能会遇到 javascript 错误，因为无论返回什么结果，您的 for 循环都会运行 10 次。这可能会阻止第二个请求运行。

尝试将成功回调的内容更改为：

for (var i = 0; i < data.data.length; i++) {
    $(".pics").append("<a target='_blank' href='" + data.data[i].link + "'><img src='" + data.data[i].images.low_resolution.url +"'></img></a>");
}

我将 10 更改为 data.data.length，这样它只会循环返回的结果数。

如果您只想显示最多 10 个，请执行以下操作：

for (var i = 0; i < data.data.length && i < 10; i++) {
    $(".pics").append("<a target='_blank' href='" + data.data[i].link + "'><img src='" + data.data[i].images.low_resolution.url +"'></img></a>");
}
于 2012-07-27T09:57:06.463 回答
0

工作样本：http: //jsfiddle.net/h6NgP/

你只是有一个括号错误；）小的语法问题。第一次在 jsfiddle 中工作

于 2012-07-27T10:00:15.340 回答
0

我看到这个问题

for (var i = 0; i < 10; i++) {

你已经硬编码了 10。你确定你每次都得到“新鲜”的图像列表吗？或者可能是新图像被附加到 JSON 中，而您没有看到这一点只是因为您仅对其进行了 10 次迭代。

于 2012-07-27T10:00:33.997 回答