Question

我目前的项目是在codepen上创建一个本地天气应用程序。我从openweathermap.org获得了API，我正在使用此代码获取用户位置：

 $.getJSON("http://ip-api.com/json",function(data2) {
     lat = data2.lat;
     long = data2.lon;
}

我的目标是根据openweathermap.org的天气描述显示不同的背景图像。我已经给出了变量weatherType。我正在使用if if else和else语句来浏览不同的weatherTypes并根据与输出匹配的weatherType分配背景图像。另外，我所有的img都来自unsplash。

例如，如果weatherType下雨，我想要有一张雨的背景照片。

以下是我的代码示例：

if (weatherType = "clear sky" || "few clouds" || "calm" || "light breeze" || 
"fresh breeze"){
    $('body').css('background-image', 'url(https://images.unsplash.com/photo- 
    1476611338391-6f395a0ebc7b?ixlib=rb-0.3.5&q=80&fm=jpg&crop= entropy&cs= 
    tinysrgb&s=e444d875e55debddc2319c386d96df90 )');
}

 else if (weatherType = "light intensity drizzle" || "drizzle   " || "heavy
 intensity drizzle" || "light intensity drizzle rain" || "drizzle rain" || 
 "heavy intensity drizzle rain" || "shower rain and drizzle" || "heavy shower 
 rain and drizzle" || "shower drizzle" || "light rain" || "moderate rain" ||
 "heavy intensity rain" || "very heavy rain" || "extreme rain" ||  "light
 intensity shower rain" || "shower rain" || "heavy intensity shower rain" ||
 "ragged shower rain" ){
    $("body").css("background-image",
    "url(https://images.unsplash.com/photo-1470432581262-e7880e8fe79a?ixlib=rb
    -0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=c11591dd2cf9 c9d41b1d577df 
    052785)");
 }

我的问题是图像似乎没有加载，而是我得到这张随机照片，而且甚至不会总是出现。我也没有专注于CSS或任何形式的风格，因为我试图先做到这一点。

您可以访问我的codepen查看整个代码：https://codepen.io/u1tron/pen/jVBeRq

Answer 1

您的if语句无效。

使用===进行比较，而不是使用=进行分配
在每个OR语句中比较weatherType，否则它只是评估＆＃34;淋浴雨＆＃34;例如是真的。

if（weatherType ===＆＃34;晴空＆＃34; || weatherType ===＆＃34;少云＆＃34; ....

或者您可以使用switch：

switch(weatherType){
   case: "clear sky":
   case: "few clouds":
      //Set background image
      break;
   case "light intensity drizzle":
   case "drizzle   ":
      //Set different background image
      break;
}

Answer 2

Curt解释了错误的if语法，但我想补充一些建议：

分开数据和逻辑，就像这样

var images = [
{
    // default
    url: '1432071315934-33a387ee0437?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=3c71ae1096b49e93615f91a1319bddc9'
},
{
    condition: ['clear sky', 'few clouds', 'calm', 'light breeze', 'fresh breeze'],
    url: '1476611338391-6f395a0ebc7b?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=e444d875e55debddc2319c386d96df90'
},
{
    condition:  ['light intensity drizzle', 'drizzle', 'heavy intensity drizzle', 'light intensity drizzle rain', 'drizzle rain', 'heavy intensity drizzle rain', 'shower rain and drizzle', 'heavy shower rain and drizzle', 'shower drizzle', 'light rain', 'moderate rain', 'heavy intensity rain', 'very heavy rain', 'extreme rain', 'light intensity shower rain', 'shower rain', 'heavy intensity shower rain', 'ragged shower rain'],
    url: '1470432581262-e7880e8fe79a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=c11591dd2cf9c9d491b1d577df052785'
}];

稍后，在您的设置功能中：

// background
var url;
for (var i in images) {
    if (!images[i]["condition"] || images[i]["condition"].indexOf(weatherType) > -1) {
        url = images[i]["url"];
    }
}
$('body').css('background-image', 'url(https://images.unsplash.com/photo-' + url + ')');

Answer 3

您正在使用分配运算符（=）。在条件语句中使用条件运算符（==）。并分配url值，如：

$('body').css('background-image', 'url(' + https://images.unsplash.com/photo- 
1476611338391-6f395a0ebc7b?ixlib=rb-0.3.5&q=80&fm=jpg&crop= entropy&cs= 
tinysrgb&s=e444d875e55debddc2319c386d96df90 + ')');

或者您可以将url存储在变量中：

var imgUrl = https://images.unsplash.com/photo- 
1476611338391-6f395a0ebc7b?ixlib=rb-0.3.5&q=80&fm=jpg&crop= entropy&cs= 
tinysrgb&s=e444d875e55debddc2319c386d96df90 ;
$('body').css('background-image', 'url('+imgUrl +')');

使用jQuery和逻辑流语句更改背景图像

3 个答案: