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

どのような結果が返されても for ループが 10 回実行されるため、最初の結果を処理するときに JavaScript エラーが発生する可能性があります。これにより、2 番目の要求の実行が停止する可能性があります。

成功のコールバックの内容を次のように変更してみてください。

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

これには問題があると思います

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

10 をハードコーディングしました。毎回「FRESH」の画像リストを取得していますか? または、新しい画像が JSON に追加され、10 回しか反復していないという理由だけでこれが表示されない場合もあります。

于 2012-07-27T10:00:33.997 に答える
0

作業サンプル: http://jsfiddle.net/h6NgP/

ブラケット エラーが発生しました ;) マイナーな構文の問題です。jsfiddleで初めて動作します

于 2012-07-27T10:00:15.340 に答える