在 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 循环：

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

假设您的class是day1、image1等

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

Struggle calling HTML classes in a Javascript for loop

html

javascript

weather