Ändern Sie das Hintergrundbild mithilfe von jQuery und logischen Flussanweisungen

Question

Mein aktuelles Projekt erstellt eine lokale Wetter-App auf Codepen. Ich habe die API von openweathermap.org und ich verwende diesen Code, um den Benutzer Standort:

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

Mein Ziel ist ein anderes Hintergrundbild auf der Wetterbeschreibung anhand von openweathermap.org anzuzeigen. Dies habe ich der Variablen weatherType gegeben. Ich verwende if, if else und else Statements, um die verschiedenen weatherTypes zu durchlaufen und ein Hintergrundbild basierend auf dem weatherType zuzuordnen, der mit der Ausgabe übereinstimmt. Auch alle meine Bilder, die ich bekommen habe, sind von uns aufgetaucht.

Zum Beispiel, wenn der weatherType regnerisch ist, möchte ich ein Hintergrundfoto von Regen haben. Hier

ist ein Beispiel für meinen Code:

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)"); 
} 

Mein Problem ist, die Bilder scheinen nicht zu laden, und stattdessen erhalte ich dieses zufällige Foto statt, und das nicht einmal immer angezeigt. Ich habe mich auch nicht auf CSS oder irgendeine Art von Stil konzentriert, da ich versuche, dies zuerst zu tun.

Sie meine codepen gehen kann im gesamten Code suchen: https://codepen.io/u1tron/pen/jVBeRq

Answer 1

Curt erklärte die schlecht, wenn Syntax, aber ich möchte ein paar Ratschläge hinzuzufügen:

Separate Daten und Logik, wie diese

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' 
}]; 

Später in Ihrer Setup-Funktion:

// 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

Ihre if-Anweisung nicht gültig ist.

• Verwenden === zum Vergleich statt =, die für die Zuordnung ist

• Vergleich weatherType in jedem Ihrer OR-Anweisungen sonst einfach es beurteilen, ob „Dusche regt“ zum Beispiel ist wahr.

  if (weatherType === "clear sky" || weatherType === "leicht bewölkt" ....

Alternativ Sie eine switch verwenden:

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

Sie verwenden Zuweisungsoperator (=) verwendet Bedingungsoperator (==) in bedingter Anweisung Und wie uRL-Wert zuweisen:..

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

oder Sie können url in Variablen speichern:

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