努力在Javascript中调用HTML类for循环

Question

我正在尝试为学校建立一个天气网站。我已完成主页，以根据用户当前位置准确显示天气信息。我现在试图对未来5天做出预测。我可以成功构建这个，但代码很长，因为我没有使用循环。但是，当试图建立一个循环，我不能得到它的工作。

这里是我的代码：

$(function() { 
    $.simpleWeather({ 
    location: 'Boston, MA', 
    unit: 'c', 
    success: function (weather) { 
     /*day1 = weather.forecast[1].day; 
     image1 = '<img class="weathericon" src="img/weathericons/' + weather.forecast[1].code + '.svg" alt="weather icon">'; 
     temp1 = weather.forecast[1].high + '&deg;'; 
     text1 = weather.forecast[1].text; 

     day2 = weather.forecast[2].day; 
     image2 = '<img class="weathericon" src="img/weathericons/' + weather.forecast[2].code + '.svg" alt="weather icon">'; 
     temp2 = weather.forecast[2].high + '&deg;'; 
     text2 = weather.forecast[2].text; 

     day3 = weather.forecast[3].day; 
     image3 = '<img class="weathericon" src="img/weathericons/' + weather.forecast[3].code + '.svg" alt="weather icon">'; 
     temp3 = weather.forecast[3].high + '&deg;'; 
     text3 = weather.forecast[3].text; 

     day4 = weather.forecast[4].day; 
     image4 = '<img class="weathericon" src="img/weathericons/' + weather.forecast[4].code + '.svg" alt="weather icon">'; 
     temp4 = weather.forecast[4].high + '&deg;'; 
     text4 = weather.forecast[4].text; 

     day5 = weather.forecast[5].day; 
     image5 = '<img class="weathericon" src="img/weathericons/' + weather.forecast[5].code + '.svg" alt="weather icon">'; 
     temp5 = weather.forecast[5].high + '&deg;'; 
     text5 = weather.forecast[5].text; 

     $(".day1").html(day1); 
     $(".image1").html(image1); 
     $(".temp1").html(temp1); 
     $(".text1").html(text1); 

     $(".day2").html(day2); 
     $(".image2").html(image2); 
     $(".temp2").html(temp2); 
     $(".text2").html(text2); 

     $(".day3").html(day3); 
     $(".image3").html(image3); 
     $(".temp3").html(temp3); 
     $(".text3").html(text3); 

     $(".day4").html(day4); 
     $(".image4").html(image4); 
     $(".temp4").html(temp4); 
     $(".text4").html(text4); 

     $(".day5").html(day5); 
     $(".image5").html(image5); 
     $(".temp5").html(temp5); 
     $(".text5").html(text5);*/ 

     for(var i=0;i<weather.forecast.length;i++){ 
     day[i] = weather.forecast[i].day; 
     image[i] = '<img class="weathericon" src="img/weathericons/' + weather.forecast[i].code + '.svg" alt="weather icon">'; 
     temp[i] = weather.forecast[i].high + '&deg;'; 
     text[i] = weather.forecast[i].text;  

     $(".day"+i).html(day[i]); 
     $(".image"+i).html(image[i]); 
     $(".temp"+i).html(temp[i]); 
     $(".text"+i).html(text[i]); 
     } 
    }, 
    error: function (error) { 
     $("#weather").html('<p>' + error + '</p>'); 
    } 
    }); 
}); 

https://codepen.io/Evexium/pen/wrQOqb

就在for循环：

for(var i=0;i<weather.forecast.length;i++){ 
     day[i] = weather.forecast[i].day; 
     image[i] = '<img class="weathericon" src="img/weathericons/' + weather.forecast[i].code + '.svg" alt="weather icon">'; 
     temp[i] = weather.forecast[i].high + '&deg;'; 
     text[i] = weather.forecast[i].text;  

     $(".day"+i).html(day[i]); 
     $(".image"+i).html(image[i]); 
     $(".temp"+i).html(temp[i]); 
     $(".text"+i).html(text[i]); 
     } 

我想我的问题是在这里：

$(".day"+[i]).html(day[i]); 
$(".image"+[i]).html(image[i]); 
$(".temp"+[i]).html(temp[i]); 
$(".text"+[i]).html(text[i]); 

但我不不知道如何使其工作。帮助会很棒！

Answer 1

这些线条看起来不正确：

$(".day[i]").html(day[i]); 
$(".image"+[i]).html(image[i]); 

正确的jQuery选择应该是这样的：

$(".day"+i).html(day[i]); 
$(".image"+i).html(image[i]); 

假设你们班day1，image1等