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

Question

我目前的项目是创建一个本地天气应用程序的代码。我从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都是从不溅出来的。

例如，如果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或任何形式的风格，因为我试图首先做到这一点。

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

Answer 1

如果语句无效。

• 使用===作为比较，而不是用于赋值的=
• 在您的OR语句中比较weatherType，否则它只是简单地评估“淋浴雨”是否是真的。 如果(weatherType ===“晴空”\x weatherType ===“几朵云”).

或者，您可以使用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

您正在使用赋值运算符(=)。在条件语句中使用条件运算符(==)。并指定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 +')');

Answer 3

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