努力在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等