Javascript forループでHTMLクラスを呼び出す闘争

Question

私は学校のための天気Webサイトを構築しようとしています。私はユーザーの現在地に基づいて気象情報を正確に表示するためにホームページを完成させました。私は今、次の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ループ：

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

しかし、私はドン：私は私の問題がここにあると思い

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

方法を知らないそれを機能させる。助けが素晴らしいだろう！

Answer 1

これらの行は右見ていない：

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

正しいjQueryのセレクタは次のようになります。あなたのクラスを想定し

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

など