使用 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 获得的。

比如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，否则它只是评估 "shower rain" 是否为真。

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

或者您可以使用 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 + ')');

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

Change the background-image using jQuery and logical flow statements

javascript

css

jquery

if-statement

background-image