如何将图像分配给对象键中的 17 个可能值
How to assign an image to 17 possible values in an object's key
我需要一些帮助。我必须为 const urlJson[ 的图标键值的 17 个可能值中的每一个分配一个图像（存储在常量 iconOne，iconTwo...） =18=]。这 17 个选项在下面代码的 Ifs 中，以及 const。我怎样才能做到这一点？我无法使用如果...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link id="mystylesheet" type="text/css" rel="stylesheet" href="style.css">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="wrapper">
<h1 class="city"></h1>
</div>
<script>
const iconOne = ('<img src="https://openweathermap.org/img/wn/01d@2x.png" height="42" width="42" style="vertical-align: middle">')
const iconTwo = ('<img src="https://openweathermap.org/img/wn/01n@2x.png" height="42" width="42" style="vertical-align: middle">')
const iconThree = ('<img src="https://openweathermap.org/img/wn/02d@2x.png" height="42" width="42" style="vertical-align: middle">')
const iconFour = ('<img src="https://openweathermap.org/img/wn/02n@2x.png" height="42" width="42" style="vertical-align: middle">')
const iconFive = ('<img src="https://openweathermap.org/img/wn/03d@2x.png" height="42" width="42" style="vertical-align: middle">')
const iconSix = ('<img src="https://openweathermap.org/img/wn/04d@2x.png" height="42" width="42" style="vertical-align: middle">')
const iconSeven = ('<img src="https://openweathermap.org/img/wn/09d@2x.png" height="42" width="42" style="vertical-align: middle">')
const iconEight = ('<img src="https://openweathermap.org/img/wn/10d@2x.png" height="42" width="42" style="vertical-align: middle">')
const iconNine = ('<img src="https://openweathermap.org/img/wn/10n@2x.png" height="42" width="42" style="vertical-align: middle">')
const iconTen = ('<img src="https://openweathermap.org/img/wn/11d@2x.png" height="42" width="42" style="vertical-align: middle">')
const iconEleven = ('<img src="https://openweathermap.org/img/wn/13d@2x.png" height="42" width="42" style="vertical-align: middle">')
const iconTwelve = ('<img src="https://openweathermap.org/img/wn/50d@2x.png" height="42" width="42" style="vertical-align: middle">')
const urlJsonString = $.getJSON('https://api.openweathermap.org/data/2.5/onecall?lat=38.7267&lon=-9.1403&exclude=current,hourly,minutely,alerts&units=metric&appid={APPID}', function (data) {
const urlJson = data.daily.map(({ dt, temp: { day }, weather: [{ description, icon }] }) => ({ dt, day, description, icon }))
var htmlResult = '';
urlJson.forEach(item => {
// THESE IFs JUST RETURN iconOne
if (item.icon = '01d') {
item.icon = iconOne
} else if (item.icon = '01n') {
item.icon = iconTwo
} else if (item.icon = '02d') {
item.icon = iconThree
} else if (item.icon = '02n') {
item.icon = iconFour
} else if (item.icon = '03d') {
item.icon = iconFive
} else if (item.icon = '03n') {
item.icon = iconFive
} else if (item.icon = '04d') {
item.icon = iconSix
} else if (item.icon = '04n') {
item.icon = iconSix
} else if (item.icon = '09d') {
item.icon = iconSeven
} else if (item.icon = '09n') {
item.icon = iconSeven
} else if (item.icon = '10d') {
item.icon = iconEight
} else if (item.icon = '10n') {
item.icon = iconNine
} else if (item.icon = '11d') {
item.icon = iconTen
} else if (item.icon = '11n') {
item.icon = iconTen
} else if (item.icon = '13d') {
item.icon = iconEleven
} else if (item.icon = '13n') {
item.icon = iconEleven
} else if (item.icon = '50d') {
item.icon = iconTwelve
} else if (item.icon = '50n') {
item.icon = iconTwelve
}
var date = new Date(item.dt)
htmlResult += `Temperature: ${item.day} ºC<br>
Day: ${date}<br>
Description: ${item.description}<br>
${item.icon}<br><br>`
});
$(".city").html(htmlResult);
});
</script>
</body>
</html>
这是存储在 urlJson const 中的对象，这是我想在常量之一中将图像分配给的图标键：
{ dt: 1643803200, day: 12.84, description: 'clear sky', icon: '01d' }
{ dt: 1643889600, day: 14.56, description: 'overcast clouds', icon: '04d' }
{ dt: 1643976000, day: 14.85, description: 'overcast clouds', icon: '04d' }
{ dt: 1644062400, day: 14.41, description: 'broken clouds', icon: '04d' }
{ dt: 1644148800, day: 14.99, description: 'clear sky', icon: '01d' }
{ dt: 1644235200, day: 15.68, description: 'few clouds', icon: '02d' }
{ dt: 1644321600, day: 14.95, description: 'broken clouds', icon: '04d' }
{ dt: 1644408000, day: 16.37, description: 'overcast clouds', icon: '04d' }
首先，上面的问题是您正在分配值而不是比较，因为您使用的是单个等号
if (item.icon = '01d') { ... 将 item.icon 指定为 01d
if (item.icon == '01d') { ... 比较 item.icon 和 01d
的值
其次，与其使用巨大的 IF 块，不如这样构建您的代码：
const iconCodes = {
'01d' : '<img src="https://openweathermap.org/img/wn/01d@2x.png" height="42" width="42" style="vertical-align: middle">',
'01e' : '<img src="https://openweathermap.org/img/wn/01n@2x.png" height="42" width="42" style="vertical-align: middle">'
}
然后，只需在循环中引用它...
htmlResult += `Temperature: ${item.day} ºC<br>
Day: ${date}<br>
Description: ${item.description}<br>
${iconCodes[item.icon]}<br><br>`
我需要一些帮助。我必须为 const urlJson[ 的图标键值的 17 个可能值中的每一个分配一个图像（存储在常量 iconOne，iconTwo...） =18=]。这 17 个选项在下面代码的 Ifs 中，以及 const。我怎样才能做到这一点？我无法使用如果...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link id="mystylesheet" type="text/css" rel="stylesheet" href="style.css">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="wrapper">
<h1 class="city"></h1>
</div>
<script>
const iconOne = ('<img src="https://openweathermap.org/img/wn/01d@2x.png" height="42" width="42" style="vertical-align: middle">')
const iconTwo = ('<img src="https://openweathermap.org/img/wn/01n@2x.png" height="42" width="42" style="vertical-align: middle">')
const iconThree = ('<img src="https://openweathermap.org/img/wn/02d@2x.png" height="42" width="42" style="vertical-align: middle">')
const iconFour = ('<img src="https://openweathermap.org/img/wn/02n@2x.png" height="42" width="42" style="vertical-align: middle">')
const iconFive = ('<img src="https://openweathermap.org/img/wn/03d@2x.png" height="42" width="42" style="vertical-align: middle">')
const iconSix = ('<img src="https://openweathermap.org/img/wn/04d@2x.png" height="42" width="42" style="vertical-align: middle">')
const iconSeven = ('<img src="https://openweathermap.org/img/wn/09d@2x.png" height="42" width="42" style="vertical-align: middle">')
const iconEight = ('<img src="https://openweathermap.org/img/wn/10d@2x.png" height="42" width="42" style="vertical-align: middle">')
const iconNine = ('<img src="https://openweathermap.org/img/wn/10n@2x.png" height="42" width="42" style="vertical-align: middle">')
const iconTen = ('<img src="https://openweathermap.org/img/wn/11d@2x.png" height="42" width="42" style="vertical-align: middle">')
const iconEleven = ('<img src="https://openweathermap.org/img/wn/13d@2x.png" height="42" width="42" style="vertical-align: middle">')
const iconTwelve = ('<img src="https://openweathermap.org/img/wn/50d@2x.png" height="42" width="42" style="vertical-align: middle">')
const urlJsonString = $.getJSON('https://api.openweathermap.org/data/2.5/onecall?lat=38.7267&lon=-9.1403&exclude=current,hourly,minutely,alerts&units=metric&appid={APPID}', function (data) {
const urlJson = data.daily.map(({ dt, temp: { day }, weather: [{ description, icon }] }) => ({ dt, day, description, icon }))
var htmlResult = '';
urlJson.forEach(item => {
// THESE IFs JUST RETURN iconOne
if (item.icon = '01d') {
item.icon = iconOne
} else if (item.icon = '01n') {
item.icon = iconTwo
} else if (item.icon = '02d') {
item.icon = iconThree
} else if (item.icon = '02n') {
item.icon = iconFour
} else if (item.icon = '03d') {
item.icon = iconFive
} else if (item.icon = '03n') {
item.icon = iconFive
} else if (item.icon = '04d') {
item.icon = iconSix
} else if (item.icon = '04n') {
item.icon = iconSix
} else if (item.icon = '09d') {
item.icon = iconSeven
} else if (item.icon = '09n') {
item.icon = iconSeven
} else if (item.icon = '10d') {
item.icon = iconEight
} else if (item.icon = '10n') {
item.icon = iconNine
} else if (item.icon = '11d') {
item.icon = iconTen
} else if (item.icon = '11n') {
item.icon = iconTen
} else if (item.icon = '13d') {
item.icon = iconEleven
} else if (item.icon = '13n') {
item.icon = iconEleven
} else if (item.icon = '50d') {
item.icon = iconTwelve
} else if (item.icon = '50n') {
item.icon = iconTwelve
}
var date = new Date(item.dt)
htmlResult += `Temperature: ${item.day} ºC<br>
Day: ${date}<br>
Description: ${item.description}<br>
${item.icon}<br><br>`
});
$(".city").html(htmlResult);
});
</script>
</body>
</html>
这是存储在 urlJson const 中的对象，这是我想在常量之一中将图像分配给的图标键：
{ dt: 1643803200, day: 12.84, description: 'clear sky', icon: '01d' }
{ dt: 1643889600, day: 14.56, description: 'overcast clouds', icon: '04d' }
{ dt: 1643976000, day: 14.85, description: 'overcast clouds', icon: '04d' }
{ dt: 1644062400, day: 14.41, description: 'broken clouds', icon: '04d' }
{ dt: 1644148800, day: 14.99, description: 'clear sky', icon: '01d' }
{ dt: 1644235200, day: 15.68, description: 'few clouds', icon: '02d' }
{ dt: 1644321600, day: 14.95, description: 'broken clouds', icon: '04d' }
{ dt: 1644408000, day: 16.37, description: 'overcast clouds', icon: '04d' }
首先，上面的问题是您正在分配值而不是比较，因为您使用的是单个等号
if (item.icon = '01d') { ... 将 item.icon 指定为 01d
if (item.icon == '01d') { ... 比较 item.icon 和 01d
其次，与其使用巨大的 IF 块，不如这样构建您的代码：
const iconCodes = {
'01d' : '<img src="https://openweathermap.org/img/wn/01d@2x.png" height="42" width="42" style="vertical-align: middle">',
'01e' : '<img src="https://openweathermap.org/img/wn/01n@2x.png" height="42" width="42" style="vertical-align: middle">'
}
然后，只需在循环中引用它...
htmlResult += `Temperature: ${item.day} ºC<br>
Day: ${date}<br>
Description: ${item.description}<br>
${iconCodes[item.icon]}<br><br>`