我目前是一名网络开发人员训练营的学生,我正在做一个项目.我知道有一种方法可以简化这个函数,但我似乎无法掌握它.有什么方法可以将整个过程简化为一个for循环,这样我就不必对每个元素都这样做了?我正在调用一个天气API,并将它们应用于HTML.另外,由于某些原因,JQuery不允许我使用$,所以我使用querySelector.
HTML个
<div class="row bottom">
<div class="col"><span class="subtitle">-Temperature-</span></div>
<div class="col">
<div class="row" id="date1">Sun</div>
<div class="row data" id="date1Temp"><b>-4°</b></div>
</div>
<div class="col">
<div class="row" id="date2">Mon</div>
<div class="row data" id="date2Temp"><b>-5°</b></div>
</div>
<div class="col">
<div class="row" id="date3">Tue</div>
<div class="row data" id="date3Temp"><b>-10°</b></div>
</div>
<div class="col">
<div class="row" id="date4">Wed</div>
<div class="row data" id="date4Temp"><b>-4°</b></div>
</div>
<div class="col">
<div class="row" id="date5">Thu</div>
<div class="row data" id="date5Temp"><b>-2°</b></div>
</div>
<div class="col">
<hr />
</div>
</div>
JS个
let fiveDayWeather = function (weatherValue) {
const date1 = document.querySelector("#date1");
const date2 = document.querySelector("#date2");
const date3 = document.querySelector("#date3");
const date4 = document.querySelector("#date4");
const date5 = document.querySelector("#date5");
const date1Temp = document.querySelector("#date1Temp");
const date2Temp = document.querySelector("#date2Temp");
const date3Temp = document.querySelector("#date3Temp");
const date4Temp = document.querySelector("#date4Temp");
const date5Temp = document.querySelector("#date5Temp");
let todaysMonth = dayjs().$M;
let tomorrow = dayjs().$D + 1;
let twoDaysAfter = dayjs().$D + 2;
let threeDaysAfter = dayjs().$D + 3;
let fourDaysAfter = dayjs().$D + 4;
let fiveDaysAfter = dayjs().$D + 5;
date1.innerText = `${todaysMonth}/${tomorrow}`;
date1Temp.innerText = weatherValue.list[1].main.temp + "\u00B0 F";
date2.innerText = `${todaysMonth}/${twoDaysAfter}`;
date2Temp.innerText = weatherValue.list[2].main.temp + "\u00B0 F";
date3.innerText = `${todaysMonth}/${threeDaysAfter}`;
date3Temp.innerText = weatherValue.list[3].main.temp + "\u00B0 F";
date4.innerText = `${todaysMonth}/${fourDaysAfter}`;
date4Temp.innerText = weatherValue.list[4].main.temp + "\u00B0 F";
date5.innerText = `${todaysMonth}/${fiveDaysAfter}`;
date5Temp.innerText = weatherValue.list[5].main.temp + "\u00B0 F";