我目前是一名网络开发人员训练营的学生,我正在做一个项目.我知道有一种方法可以简化这个函数,但我似乎无法掌握它.有什么方法可以将整个过程简化为一个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&deg;</b></div>
   </div>
   <div class="col">
     <div class="row" id="date2">Mon</div>
     <div class="row data" id="date2Temp"><b>-5&deg;</b></div>
   </div>
   <div class="col">
     <div class="row" id="date3">Tue</div>
     <div class="row data" id="date3Temp"><b>-10&deg;</b></div>
   </div>
   <div class="col">
     <div class="row" id="date4">Wed</div>
     <div class="row data" id="date4Temp"><b>-4&deg;</b></div>
   </div>
   <div class="col">
     <div class="row" id="date5">Thu</div>
     <div class="row data" id="date5Temp"><b>-2&deg;</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";

推荐答案

像这样的事情应该会奏效:

let fiveDayWeather = function (weatherValue) {

    let todaysMonth = dayjs().$M;

    for( let i = 1; i < 6; i++ ){

        document.querySelector( "#date" + i ).innerText = `${todaysMonth}/${ dayjs().$D + i }`;
        document.querySelector( "#date" + i + "Temp" ).innerText = weatherValue.list[i].main.temp + "\u00B0 F";
    }
}

Javascript相关问答推荐

在页面上滚动 timeshift 动垂直滚动条

使用复选框在d3.js多折线图中添加或删除线条

如何调用名称在字符串中的实例方法?

如何从网站www.example.com获取表与Cheerio谷歌应用程序脚本

JSDoc创建并从另一个文件导入类型

Angular 中的类型错误上不存在获取属性

可更改语言的搜索栏

使用Nuxt Apollo在Piniastore 中获取产品细节

如何使用JS创建一个明暗功能按钮?

回溯替代方式

使用插件构建包含chart.js提供程序的Angular 库?

我想将Sitecore搜索面过滤器从多个转换为单个

是否可以将Select()和Sample()与Mongoose结合使用?

每隔3个项目交替显示,然后每1个项目交替显示

如何在每隔2分钟刷新OKTA令牌后停止页面刷新

Promise.race()返回已解析的promise ,而不是第一个被拒绝的promise

如何在css中裁剪成一定Angular 的圆的一部分,而不需要复杂的多边形

如何在单击链接时设置一个JavaScript变量(以打开弹出窗口的特定部分)

使用JavaScript或PHP从div ID值创建锚标记和链接

打字脚本中的函数包装键入