使用 Javascript 对象使用 jQuery 的 .css() 设置背景图像
Using Javascript object to set background-image with jQuery's .css()
我正在编写一个前端Web应用程序,为用户的位置提供天气条件。虽然基本功能正在工作,但目前我正在尝试编写允许应用程序根据当前天气条件更改body
背景的逻辑。为此,我正在使用OpenWeatherMap API。对此 API 的调用会返回 JSON 响应,在返回的许多内容中,有两个字段 - id
和 icon
。 id
返回一个确定天气状况的数字代码,如晴朗的天空或破碎的云层,icon
返回一个字符串,用于确定是白天还是黑夜。
为了编写逻辑,我创建了一个JS对象,该对象将id
条件代码作为keys
,将相应的图像作为values
。在 .ajax()
函数中,我有一个switch
块,我根据返回的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 上托管图像,因为我认为错误可能是由于图像链接本身造成的。但它没有效果。
这是开关块的一部分 -
//---------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)");
}
这是带有完整代码的笔。
"url(weatherConditions['6xx']"
正是它的样子。那里没有发生替换,您告诉浏览器使用 weatherConditions['6xx']
,字面意思是 URL 作为 URL。(你也错过了这方面的)
。
您可能想替换:
$("body").css("background-image", "url(" + weatherConditions['6xx'] + ")");
在 ES2015 中(您今天可以使用转译,并且在几个月/一年/没有转译的情况下使用(,您可以使用模板字符串(用反引号引号引用,对占位符使用 ${...}
(:
$("body").css("background-image", `url(${weatherConditions['6xx']})`);
以下是使用我们的头像的示例:
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>
- 使用css()设置背景图像;不起作用
- 在BootStrap菜单栏中为所选项目设置背景,类似于BootStrap中的父导航选项
- 使用媒体查询设置背景图像的不透明度
- 如何随机设置背景
- 如何使用JavaScript函数在HTML页面中正确设置背景图像
- AngularJs设置背景颜色/颜色的动画
- 在jquery中使用css设置背景大小
- 为d3.js可折叠树设置背景
- 使用css设置背景的宽度和高度
- 使用jquery在CSS中设置背景图像
- 动态设置背景图像或创建img标记有什么区别
- Highcharts设置背景颜色和不透明度
- 从本地存储 base64 字符串设置背景图像
- 如何在AppGyver超音速中设置背景颜色
- 无法让 JavaScript 与 readOnly 属性同时设置背景颜色
- 三.js - 设置背景场景的纹理失败
- 单选按钮 - 单击时设置背景样式
- css() 没有为 body tag 设置背景属性
- 使用 css jquery 设置背景图像
- 使用 Javascript 对象使用 jQuery 的 .css() 设置背景图像