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

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

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

我的目标是根据openweathermap.org的天气描述显示不同的背景图像。这是我给出的可变天气类型。我使用if、if-else和else语句遍历不同的weatherType，并根据与输出匹配的weatherType指定背景图像。还有，我所有的img都是从unsplash得到的

例如，如果weatherType是rain，我想要一张rain的背景照片

下面是我的代码示例：

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或任何形式的风格上，因为我试图先完成这项工作

---

您可以转到我的代码笔查看整个代码：

您的if语句无效

• 使用

  ==

  进行比较，而不是用于赋值的

  =

• 比较你的每个OR语句中的

  weatherType

  ，否则它只是评估“阵雨”是否为真
  如果（weatherType===“晴空”| weatherType===“少云”

或者，您可以使用

开关

：

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

---

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

---

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

---

我认为，如果不将url用引号括起来，代码中就不可能有这样的url。CSS的

url（）

中不需要引号，但JS代码中确实需要引号。