Giphy API：使用 jQuery 为随机 GIF 设置新的源属性

Question

我很接近！有点困惑...如果我把事情复杂化了，请告诉我。

我正在使用 public Giphy API 来拉出一个随机 gif（下面示例中的 tag=dog）并想循环浏览每次单击按钮时都会生成新的。

在下面的示例中，我让控制台记录 "success," 我只是不太清楚如何将新的随机数 URL 设置为源。

感谢任何帮助，提前致谢！

HTML:

<div class="iframe">
  <iframe src="https://giphy.com/embed/26FmRLBRZfpMNwWdy" id="giphy-embed">
  </iframe>
</div>

<button type='button' class="btn btn-default" id="new"> New GIF
</button>

JS/jQuery:

$("#new").click(function () {
  var gif = $('#giphy-embed').attr('src', function(newGIF){ //This is where it will go!
  $.ajax ({
    url: "//api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=dog",
    type: "GET",
    success: function(response) {

      console.log("success");    //This is what I get, just need to set the new URL as the src
    }, 
    error: function(e) {
      console.log("uh oh");
      }
    });
  });

});

Answer 1

尝试更新 iframe src 作为成功函数的一部分。

$("#new").click(function () {
 //This is where it will go!
  var imgSrc;
  $.ajax ({
    url: "//api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=dog",
    type: "GET",
    success: function(response) {
      // console.log(response);
      imgSrc = response.data.image_url;
      $("#giphy-embed").attr("src", imgSrc);
      return false;
    }, 
    error: function(e) {
      console.log("uh oh");
      }
    });
});

Giphy API：使用 jQuery 为随机 GIF 设置新的源属性

Giphy API: Setting New Source Attribute for Random GIFs with jQuery

javascript

jquery

giphy-api