javascript - 使用 Javascript 对象通过 jQuery 的 .css() 设置背景图像

Question

我正在编写一个前端网络应用程序，为用户所在位置提供天气状况。虽然基本功能正在运行，但目前我正在尝试编写允许应用程序根据当前天气状况更改 body 背景的逻辑。为此，我正在使用 OpenWeatherMap API .对此 API 的调用会返回一个 JSON 响应，在返回的许多内容中，有两个字段 - id 和 icon。 id 返回一个确定天气状况的数字代码，如 clear skies 或 broken clouds，icon 返回一个确定是白天还是晚上的字符串。

为了编写逻辑，我创建了一个 JS 对象，它将 id 条件代码作为 keys 并将相应的图像作为 values。在 .ajax() 函数中，我有一个 switch block ，其中我根据返回的 id switch , 然后使用 .css("background-image", "url(link)"); 设置正文的背景图像。

代码的问题在于 - 这样浏览器似乎无法识别背景图像的 URL。我在控制台中看到 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 上托管图像，因为我认为错误可能是由于图像链接本身造成的。但是没有效果。

这是开关 block 的一部分 -

//---------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)");
      }

这是 Pen包含完整代码。

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",
  "T.J.": "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="T.J.">
<div>
  <div class="holder"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>