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

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 语句遍历不同的 weatherType，并根据与输出匹配的 weatherType 分配背景图像。此外，我所有的 img 都是从 unsplash 获得的。

例如，如果天气类型是下雨，我想要一张下雨的背景照片。

这是我的代码示例:

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，否则它只是评估“淋浴雨”是否为真。

  if (weatherType === "clear sky"|| weatherType === "few clouds"...

或者你可以使用一个开关:

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