通过单击按钮更改背景图像(使用jQuery和API）

Change background image with click on button (using jQuery and API)

本文关键字：使用 jQuery API 图像 背景 单击 按钮      更新时间：2023-09-26

我正在使用一个 API，该 API 将随机 URL 返回到随机图像并将其设置为正文的背景图像。如何在每次单击按钮后进行更改？我有下面的代码，但这不起作用。

function changeImage() {
          $.getJSON("https://api.unsplash.com/photos/random?client_id=336b527b2e18d045045820b78062b95c825376311326b2a08f9b93eef7efc07b", function(result){
           var randomPhoto = result.urls.full;
      console.log(randomPhoto);
      $('body').css('background-image', 'url(randomPhoto)');
      });

   };

我在按钮上使用jQuery单击事件来调用函数。 

$("#button").on("click", function() {

    changeImage();

    });
});

函数每次都会加载一个新的带有图像的 JSON 对象，但背景图像不会改变......

正如DynoMyte所建议的那样，你应该这样做：

function changeImage() {
    var src = "https://api.unsplash.com/photos/random?client_id=336b527b2e18d045045820b78062b95c825376311326b2a08f9b93eef7efc07b";
    $.getJSON(src, function(result){
        $('body').css('background-image', 'url('+ result.urls.full +')');
    });
};

更改以下内容：

$('body').css('background-image', 'url(randomPhoto)');

对此：

 $('body').css('background-image', 'url('+randomPhoto+')');
相关文章：