Question

基本上，当前天气通过天气API在我们的页面上显示。

我想要做的是捕获数据（例如，29摄氏度）并使用javascript为其创建条件。就像，如果它是25-29摄氏度，将出现一个阳光图标（否则，应显示另一个图标）。

但是，当我尝试捕获数据时，控制台会显示“空字符串”，尽管数据在页面上可见。我该怎么做才能捕获动态数据？

<div class="weather">
[DYNAMICALLY WEATHER IS DISPLAYED HERE]
</div>    

$(document).ready(function() {
      $.simpleWeather({
        location: 'Singapore, SG',
        woeid: '',
        unit: 'c',
        success: function(weather) {
          html = '<p class="widget-weather-info-temp"> '+weather.temp+'<sup class="widget-weather-deg">&deg;</sup><sup class="widget-weather-unit-temp">'+weather.units.temp+'</sup></p>';

          $("#weather").html(html);
        },
        error: function(error) {
          $("#weather").html('<p>'+error+'</p>');
        }
      });
    });


    var $widgetInfoTemp = $(".widget-weather-info-temp").text();
    console.log($widgetInfoTemp);

Answer 1

对API的调用是异步的，因此您需要将console.log()放在success处理函数中。这样做时，您不需要从DOM请求元素，因为您已经可以访问返回的数据。试试这个：

$(document).ready(function() {
    $.simpleWeather({
        location: 'Singapore, SG',
        woeid: '',
        unit: 'c',
        success: function(weather) {
            html = '<p class="widget-weather-info-temp">' + weather.temp + '<sup class="widget-weather-deg">&deg;</sup><sup class="widget-weather-unit-temp">' + weather.units.temp + '</sup></p>';
            $("#weather").html(html);

            // work with the weather data here...
            console.log(weather);
            console.log(weather.temp);
            console.log(weather.units.temp);
        },
        error: function(error) {
            $("#weather").html('<p>' + error + '</p>');
        }
    });
});

Answer 2

在html追加

之后，在成功函数中执行所有逻辑

 success: function(weather) {
          html = '<p class="widget-weather-info-temp"> '+weather.temp+'<sup class="widget-weather-deg">&deg;</sup><sup class="widget-weather-unit-temp">'+weather.units.temp+'</sup></p>';

          $("#weather").html(html);

    var $widgetInfoTemp = $(".widget-weather-info-temp").text();
    console.log($widgetInfoTemp);
        },

如何获取通过API动态生成的div中的值？

2 个答案: