这是天气应用程序的一部分我一直在重做,现在我想添加未来5天的预测。我在评论中写了我想要完成的事情,我觉得我走在正确的轨道上,但我不确定我是否正确使用Jquery的.is()方法
链接到JSON示例:https://darksky.net/dev/docs/forecast
$.getJSON(api, (data) => {
// console.log(data);
const weekly_forecast = data.daily.data;
$("#currentTemp").append("<h4 id='tempData'>Currently<br> "+data.currently.temperature+"</h4>");
$("#currentConditions").append("<h4>Conditions<br>"+data.currently.summary +"</h4>");
$("#percipitationChance").append("<h4> Chance of Percipitation<br> " + data.currently.precipProbability +"%" + "</h4>");
// $("#reveal").on('click',() => { //click button
//data.main.tempData //on click convert temperature to farenheight
// });
$("#weekly_forecast div").each( () => { //loop through each div within weekly forecast
const i = 1; //Intialize counter starting at 1, we already have day[0] displayed in current data
while (i < 5) { //While my counter is less than 5 -> (for the next 5 days of the week)
$(this).is(('#day_'+i)() => { //Target the referenced element (current div in iterration)
//Append the inner html to reflect JSON data for day[i];
});
i++; //Add 1 to i and loop again unless i = 5
}
});
});
随附HTML:
<!--Weekley Forecast-->
<div class="flex-container" id="weekly_forecast">
<div class="day" id="day_1">
<h2></h2>
</div>
<div class="day" id="day_2">
<h2></h2>
</div>
<div class="day" id="day_3">
<h2></h2>
</div>
<div class="day" id="day_4">
<h2></h2>
</div>
<div class="day" id="day_5">
<h2></h2>
</div>
</div>
编辑:使用此for循环结束我的解决方案
for (var i = 0; i < 6; i++) { //loop over the object's next 5 days
const weekly_forecast = data.daily.data;
$('#day_'+[i]).append("<h3>"+weekly_forecast[i].apparentTemperatureMax + "<br></h3><P>" + weekly_forecast[i].summary + "</p>");
}
答案 0 :(得分:0)
我真的认为你不需要使用“是”,因为你只是针对内部div ID:
$.getJSON(api, (data) => {
// console.log(data);
const weekly_forecast = data.daily.data;
$("#currentTemp").append("<h4 id='tempData'>Currently<br> "+data.currently.temperature+"</h4>");
$("#currentConditions").append("<h4>Conditions<br>"+data.currently.summary +"</h4>");
$("#percipitationChance").append("<h4> Chance of Percipitation<br> " + data.currently.precipProbability +"%" + "</h4>");
// $("#reveal").on('click',() => { //click button
//data.main.tempData //on click convert temperature to farenheight
// });
for (var i = 1; i <6; i++) {
$('#day_'+i).append(data[i]) // data[i] or data.forecast[i] or whatever you have your forecast data stored in your JSON
}
});