Question

有一个我要添加到我的网站的AQICN窗口小部件。他们免费提供API服务，因此我有一个令牌ID，但代码在演示中也很好用。我可以添加特定城市的小部件，但是当我为多个城市添加小部件时，代码将中断。

请访问此网站获取其文档：https://aqicn.org/faq/2015-07-28/air-quality-widget-new-improved-feed/

这是我尝试过的代码：

<script  type="text/javascript"  charset="utf-8">

    (function(w,d,t,f){  w[f]=w[f]||function(c,k,n){s=w[f],k=s['k']=(s['k']||(k?('&k='+k):''));s['c']=  
    c=(c  instanceof  Array)?c:[c];s['n']=n=n||0;L=d.createElement(t),e=d.getElementsByTagName(t)[0];  
    L.async=1;L.src='//feed.aqicn.org/feed/'+(c[n].city)+'/'+(c[n].lang||'')+'/feed.v1.js?n='+n+k;  
    e.parentNode.insertBefore(L,e);  };  })(  window,document,'script','_aqiFeed'  );    
</script>
<script  type="text/javascript"  charset="utf-8">  

var  cities  =  ["london",  "newyork",  "seoul",  "guangzhou",  "tokyo",  "shanghai",  "paris","hongkong"];  

var  aqiWidgetConfig  =  [];    
cities.forEach(function(city)  {  aqiWidgetConfig.push({city:city,  callback:  displayCity});  });  
_aqiFeed(aqiWidgetConfig);  

function  displayCity(aqi)  {  
  $("#mutiple-city-aqi").append(aqi.text("<center>%cityname<br>%aqi<br><small>%date</small></center>"));  
}  
</script>

请帮助，因为没有显示任何内容。

Answer 1

文档指出“假设您也在使用jquery” 因为$("#id")和.append是jQuery方法，所以必须在页面中加载jQuery library。

或者您可以使用JavaScript方法

使用$("#mutiple-city-aqi")代替document.getElementById("mutiple-city-aqi") 而不是.append使用.innerHTML +=

旁注：使用https：// src='https://feed.aqicn.org/feed/'只是为了确保代码可以在任何地方加载。

并且小部件将大部分以未样式加载，因此您应该使用自己的CSS

这是整个代码的样子，我还添加了简单的CSS以使其看起来很漂亮。

我希望这会有所帮助：）

(function(w, d, t, f) {
  w[f] = w[f] || function(c, k, n) {
    s = w[f], k = s['k'] = (s['k'] || (k ? ('&k=' + k) : ''));
    s['c'] =
      c = (c instanceof Array) ? c : [c];
    s['n'] = n = n || 0;
    L = d.createElement(t), e = d.getElementsByTagName(t)[0];
    L.async = 1;
    L.src = 'https://feed.aqicn.org/feed/' + (c[n].city) + '/' + (c[n].lang || '') + '/feed.v1.js?n=' + n + k;
    e.parentNode.insertBefore(L, e);
  };
})(window, document, 'script', '_aqiFeed');

var cities = ["london", "newyork", "seoul", "guangzhou", "tokyo", "shanghai", "paris", "hongkong"];

var aqiWidgetConfig = [];
cities.forEach(function(city) {
  aqiWidgetConfig.push({
    city: city,
    callback: displayCity
  });
});
_aqiFeed(aqiWidgetConfig);

function displayCity(aqi) {
  document.getElementById("mutiple-city-aqi").innerHTML += (aqi.text("<center class='city'>%cityname<br>%aqi<br><small>%date</small></center>"));
}

.container {
  background-color: #eee;
  position: absolute;
  border-radius: 10px;
}

.city {
  position: relative;
  display: block;
  float: left;
  border: 2px solid #555;
  background-color: #fff;
  padding: 10px;
  margin: 10px;
  border-radius: 10px;
}

.city>div>span {
  padding: 0 15px!important;
  font-size: 44px;
}

<div class="container" id="mutiple-city-aqi"></div>

添加AQICN小部件，但代码中有一些错误

1 个答案: