使用Javascript對象通過jQuery的.css（）設置背景圖像

Question

我正在編寫一個前端Web應用程序，該應用程序可提供用戶所在位置的天氣狀況。 在基本功能正常運行的同時，此刻我正在嘗試編寫允許應用程序根據當前天氣情況更改body背景的邏輯。 為此，我使用了OpenWeatherMap API 。 對此API的調用將返回JSON響應，並且在返回的眾多信息中，有兩個字段id和icon 。 id返回一個確定天氣狀況的數字代碼，例如晴朗的天空或碎雲 ，而icon返回一個字符串，該字符串確定是白天還是晚上。

為了編寫邏輯，我創建了一個JS對象，該對象將id條件代碼作為keys ，並將相應的圖像作為values 。 在.ajax()函數內部，我有一個switch塊，在該塊中，我根據返回的id switch ，然后使用.css("background-image", "url(link)"); 設置身體的背景圖像。

代碼的問題在於-這樣，瀏覽器似乎無法識別背景圖片的網址。 我在控制台中看到GET - ... 404 not found錯誤。 但是，如果不是嘗試通過JS對象訪問圖像的URL，而是直接將圖像的URL放在.css() ，它將起作用。 但是，那當然不是我想要的。

這是JS對象-

//object for images
var weatherConditions = {

    //Group 2xx: Thunderstorm
    '2xx' : 'http://www.weathersnapshot.com/wp-content/uploads/2014/04/414.jpg',    

    //Group 3xx: Drizzle
    '3xx' : 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSsE4vZDsOCCsuE9X2WljNm0VewUdFj7onj438c9mD3_I6AfT71sA',

    //Group 5xx: Rain
    '5xx' : 'https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSsAlLmRls8CtL994qiwssqvQwdMNEI7yJcUUPWqNhMdtjGHExK',

    //Group 6xx: Snow
    '6xx': 'https://dl.dropbox.com/s/sywq7fk1u65lycf/6810006-snow-background.jpg?dl=0',

    //Group 800: Clear - day and night
    '800': ['https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTnYxZWx1uOc83uWxrTFfW7IiVj0XXMKM6fSdqS9U5kjh7Op_71WA', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQnSe0ASBAUAcsvEAkQqO28WFGCjLWAgODq9eosh2SBr9f4-_NI4Q'],

    //Group 80x: Clouds - day and night
    '8xx' : ['https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQ_Fl9xNhT3AVwafZ2GeciqaqdLXosI-nPfhrVGvM7QFO0z0KQa', 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTgvOYSdZ7tHUybUfF5ydC2G97i78pv3hZ8jlX632lCu26VABGs3Q']


};

注意-我也嘗試過將圖像托管在Dropbox上，因為我認為錯誤可能是由於圖像鏈接本身造成的。 但這沒有效果。

這是開關塊的一部分-

//---------get background-----------------
      var weatherID = data.weather[0].id;
      console.log("Weather ID = " + weatherID);

      switch(weatherID) {
        case 600: console.log(weatherConditions['6xx']);
                  $("body").css("background-image", "url(weatherConditions['6xx']");
                  break;
        case 800: console.log("inside clear sky weather");
                    $("body").css("background-image", "url(weatherConditions.8xx[0])");
                  break;
        case 803: //check for day or night
                  if(data.weather[0].icon.endsWith("d")) {
                    console.log("inside day weather");
                    $("body").css("background-image", "url(weatherConditions['8xx'][0])");
                  }
                  break; 
        case 804: $("body").css("background-image", "url(http://www.weathersnapshot.com/wp-content/uploads/2014/04/414.jpg)");
      }

這是帶有完整代碼的筆 。

Answer 1

"url(weatherConditions['6xx']" 到底是什么樣子。沒有替代發生的事情，你告訴瀏覽器使用weatherConditions['6xx']從字面上看，作為URL。（你也可以缺少) 。

您可能想要替代：

$("body").css("background-image", "url(" + weatherConditions['6xx'] + ")");

在ES2015中（您現在可以在轉譯中使用，而在數月/年/不進行轉譯的情況下可以使用）模板字符串（帶反引號的引號，占位符使用${...} ）：

$("body").css("background-image", `url(${weatherConditions['6xx']})`);

這是使用我們的Gravatars的示例：

 var gravatars = { "Manish": "https://www.gravatar.com/avatar/4657faf6aa5c4b2c01ce4fb6c63300ed?s=164&d=identicon&r=PG", "TJ": "https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=164&d=identicon&r=PG" }; $("input[type=button]").on("click", function() { $(".holder").css("background-image", "url(" + gravatars[this.value] + ")"); }); 

 .holder { display: inline-block; width: 164px; height: 163px; } 

 <input type="button" value="Manish"> <input type="button" value="TJ"> <div> <div class="holder"></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>