Question

在完成FreeCodeCamp的项目时，我想创建一个简单的网站，可以在按下按钮时随机获取猫的图片。所以我发现http://thecatapi.com/会给我一个随机的src，所以我可以将它添加到我的img标签中。我用jQuery做了这个，因为从我来自FCC更容易。

由于api会给我一个随机源url，我认为这不会很困难，但是根据我实现的代码，请求cat的按钮仅在第一次点击时才起作用。

这是我的HTML

<img class="img-fluid" src="" id="kitties">
<div class="catText"> <h1>Your cat will spawn here!</h1></div>

<div class="buttons text-center">
   <a class="btn btn-info" target="_blank" id="tweetButton">Tweet it!</a>
   <button class="btn btn-secondary" id="kittyButton"> Generate </button>
</div>

我的Javascript

$(document).ready(function() {
   $("#kittyButton").on("click", function(){
      $('.catText').remove();
      $("#kitties").attr('src','http://thecatapi.com/api/images/get')
   });
});

每次点击按钮时如何获得不同的图像？

在此先感谢您，您可以在我的代码集中看到整个代码HERE

Answer 1

更新了codepen：https://codepen.io/anon/pen/vrNYey?editors=1010

更新了您的代码，以便在字符串末尾添加随机数，以避免browser caching，请参阅：https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching

 var rnd = new Date().getTime();

以上代码将获得EPOC时间，并且每次请求都是唯一的

$(document).ready(function() {
$("#kittyButton").on("click", function(){
   $('.catText').remove();
 var rnd = new Date().getTime();

$("#kitties").attr('src','http://thecatapi.com/api/images/get?format=src&type=jpg,png?'+rnd)
// $('#tweetButton').attr('href', 'https://twitter.com/intent/tweet?text=' +('"'+HOAAAAAAAA+'"'+"  - "+GATITAAAAAAA));
      }); 
});

随机图像生成器项目（Javascript）

1 个答案: