Измените фоновое изображение с помощью операторов jQuery и логического потока

Question

Мой текущий проект создает локальное приложение погоды для codepen. Я получил API от openweathermap.org, и я использую этот код, чтобы получить расположение пользователей:

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

Моя цель состоит в том, чтобы иметь другое фоновое изображение отображается на основе описания погоды от openweathermap.org. Это я дал переменной weatherType. Я использую if if if else и else, чтобы проходить через различные weatherTypes и назначать фоновое изображение на основе 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

Curt объяснил плохо, если синтаксис, но я хочу добавить несколько советов:

Отдельные данные и логику, как этот

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

Answer 2

Ваше заявление, если не является действительным.

• Использование === для сравнения вместо =, который предназначен для присвоения

• Сравнить weatherType в каждой из ваших или заявлений, в противном случае это просто оценивающих ли «ливень дождь» верно, например.

  если (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; 
} 

Answer 3

You использование оператора присваивания (=) с помощью условного оператора (==) в условном операторе и назначить 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 + ')'); 

или вы можете сохранить адрес в переменной:

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