單擊按鈕更改背景圖像（使用jQuery和API）

Question

我正在使用一個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 click事件來調用該函數。

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


    changeImage();


    });

});

函數每次都會使用圖像加載一個新的JSON對象，但背景圖像不會改變...

Answer 1

正如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 +')');

    });
}; 

Answer 2

更改此：

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

對此：

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