Javascript for 루프에서 HTML 클래스를 호출하는 투쟁

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(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]); 

등