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

F.阿梅林

我当前的项目是在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都是我从飞溅中获得的。

例如,如果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

t

您的if语句无效。

  • 使用===比较,而不是=这是赋值
  • weatherType在每个OR语句中进行比较,否则,它只是在评估“淋浴雨”是否为真。

    如果(weatherType ===“晴朗的天空” || 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;
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章